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-block: 16px;
    margin-inline: 0;
    padding-block: 2px;
    padding-inline: 16px;
    display: flex;
    position: relative;

    &--expandable {
      padding-block: 2px;
      padding-inline: 8px;
    }

    @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;
    width: 32px;
    margin-inline-end: 8px;
  }

  &__input {
    @include font-body-1;

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

    &--large {
      height: 280px;
    }

    &--expandable {
      margin-top: 4px;
    }

    &: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;
    flex-shrink: 0;
    height: 22px;
    justify-content: flex-end;
    min-height: 32px;
  }

  &__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 {
      position: absolute;
      bottom: 0;
      inset-inline-end: 0;

      margin: 12px;
    }
  }
}