Signal-Desktop/stylesheets/components/Input.scss

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

.Input {
  &__container {
    @include font-body-1;
    border-radius: 6px;
    border-style: solid;
    border-width: 2px;
    margin: 16px 0;
    padding: 8px 12px;
    position: relative;

    @include light-theme {
      background: $color-white;
      border-color: $color-gray-15;
      color: $color-black;
    }

    @include dark-theme {
      background: $color-gray-80;
      border-color: $color-gray-45;
      color: $color-gray-05;
    }

    &--disabled {
      @include light-theme {
        background: $color-gray-02;
        border-color: $color-gray-05;
        color: $color-gray-90;
      }

      @include dark-theme {
        background: $color-gray-95;
        border-color: $color-gray-60;
        color: $color-gray-20;
      }
    }

    &:focus-within {
      outline: none;

      @include light-theme {
        border-color: $color-ultramarine;
      }
      @include dark-theme {
        border-color: $color-ultramarine-light;
      }
    }
  }

  &__icon {
    font-size: 24px;
    height: 32px;
    left: 0;
    position: absolute;
    top: 0;
    width: 32px;
  }

  &__input {
    @include font-body-1;

    background: inherit;
    border: none;
    resize: none;
    width: 100%;

    &--large {
      height: 280px;
    }

    &--with-icon {
      padding-left: 28px;
    }

    &:placeholder {
      color: $color-gray-45;
    }

    @include light-theme {
      color: $color-black;
    }

    @include dark-theme {
      color: $color-gray-05;
    }

    &:focus {
      outline: none;
    }
  }

  &__controls {
    align-items: center;
    display: flex;
    height: 22px;
    justify-content: flex-end;
    margin: 8px;
    position: absolute;
    right: 0;
    top: 0;
  }

  &__clear-icon {
    height: 18px;
    width: 18px;

    @include light-theme {
      @include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
    }
    @include dark-theme {
      @include color-svg('../images/icons/v2/x-24.svg', $color-gray-25);
    }
  }

  &__remaining-count {
    @include font-subtitle;
    color: $color-gray-45;

    &--large {
      bottom: 0;
      margin: 12px;
      position: absolute;
      right: 0;
    }
  }
}