signal-desktop/stylesheets/components/CompositionArea.scss

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

.CompositionArea {
  position: relative;
  min-height: 42px;
  padding-block: 10px;
  padding-inline: 0;

  &__placeholder {
    flex-grow: 1;
    margin-bottom: 6px;
  }

  &__row {
    display: flex;
    flex-direction: row;
    align-items: end;

    &--center {
      justify-content: center;
    }
    &--padded {
      padding-block: 0;
      padding-inline: 12px;
    }
    &--control-row {
      margin-top: 12px;
    }
    &--column {
      flex-direction: column;
      align-items: stretch;
    }
  }

  &__button-cell {
    margin-block: 0;
    margin-inline: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-shrink: 0;

    &:first-child {
      margin-inline-start: 12px;
    }

    &:last-child {
      margin-inline-end: 12px;
    }
  }

  &__button-edit {
    margin-bottom: 4px;
  }

  &__edit-button {
    @include button-reset;
    @include rounded-corners;
    align-items: center;
    background-color: $color-gray-45;
    display: flex;
    height: 28px;
    justify-content: center;
    width: 28px;

    &::before {
      content: '';
      height: 20px;
      width: 20px;
    }

    &--discard {
      &::before {
        @include color-svg('../images/icons/v3/x/x.svg', $color-white);
      }
    }
    &--accept {
      background-color: $color-ultramarine;
      margin-inline-start: 16px;
      &::before {
        @include color-svg('../images/icons/v3/check/check.svg', $color-white);
      }
    }
  }

  &__send-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    &::after {
      display: block;
      content: '';
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      @include color-svg(
        '../images/icons/v3/send/send-fill.svg',
        $color-ultramarine
      );
    }
  }
  &__input {
    flex-grow: 1;
    position: relative;
    margin-block: 0;
    margin-inline: 6px;

    &--large {
      margin: 0;
    }
  }
  $comp-area: &;
  &__toggle-large {
    $width: 48px;
    $height: 24px;

    width: $width;
    height: $height;
    position: absolute;
    inset-inline-start: calc(50% - $width / 2);

    // 6px coming from padding-top of .module-composition-input__input__scroller
    top: calc(0px - $height / 2 - 6px);
    border-radius: 12px 12px 0 0;
    pointer-events: none;

    opacity: 0;
    transition: opacity 200ms ease-out;

    #{$comp-area}:hover & {
      opacity: 1;
      pointer-events: all;
    }

    @include light-theme() {
      background-color: $color-white;
    }

    @include dark-theme() {
      background-color: $color-gray-95;
    }

    &__button {
      width: 48px;
      height: 24px;
      border: none;

      @include light-theme() {
        @include color-svg(
          '../images/icons/v3/chevron/chevron-shallow-up.svg',
          $color-gray-45,
          false
        );
      }

      @include dark-theme() {
        @include color-svg(
          '../images/icons/v3/chevron/chevron-shallow-up.svg',
          $color-gray-45,
          false
        );
      }

      &--large-active {
        @include light-theme() {
          @include color-svg(
            '../images/icons/v3/chevron/chevron-shallow-down.svg',
            $color-gray-45,
            false
          );
        }

        @include dark-theme() {
          @include color-svg(
            '../images/icons/v3/chevron/chevron-shallow-down.svg',
            $color-gray-45,
            false
          );
        }
      }
    }
  }
  &__attachment-list {
    width: 100%;
  }

  &--sms-only {
    display: flex;
    flex-direction: column;
    align-items: center;

    // Note the margin in &__placeholder above
    padding-block: 14px 18px;
    padding-inline: 16px;

    &:not(.module-composition-area--pending) {
      @include light-theme {
        border-top: 1px solid $color-gray-05;
      }
      @include dark-theme {
        border-top: 1px solid $color-gray-75;
      }
    }

    &__title {
      @include font-body-2-bold;
      margin-block: 0 2px;
      margin-inline: 0;

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

    &__body {
      @include font-body-2;
      text-align: center;

      margin: 0;

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

  &__attach-file {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;

    @include keyboard-mode {
      &:focus {
        outline: 2px solid $color-ultramarine;
      }
    }

    outline: none;

    &:before {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;

      @include light-theme {
        @include color-svg(
          '../images/icons/v3/attach/attach.svg',
          $color-gray-75
        );
      }
      @include dark-theme {
        @include color-svg(
          '../images/icons/v3/attach/attach.svg',
          $color-gray-15
        );
      }
    }
  }
}