@import '../../../../styles/common';
@import '../../../../styles/vendor/bootstrap_foundation-sites';
@import '../../../../styles/vendor/bootstrap_font-awesome';
@import '../../../../styles/object/o-form-element';

.m-draft-message-quick {
  &__recipient-list {
    margin-right: $co-margin;
    margin-bottom: $co-margin;
    margin-left: $co-margin;
  }

  &__container {
    @include flex-grid-row($size: expand);

    border: 1px solid #9a989b;
    background-color: $co-color__bg__action;
  }

  &__encryption {
    text-align: right;
  }

  &__toggle-advanced {
    @include flex-grid-size(shrink);

    width: 3.438rem;
    height: 3.438rem;
  }

  &__input {
    @include flex-grid-size;
    @include o-form-element;
    @include o-form-element--light;

    width: 100%;
    border: none;

    &--encrypted {
      position: relative;
    }
  }

  &__send {
    @include flex-grid-size(shrink);

    width: 3.438rem;
    height: 3.438rem;
  }

  &__send-button {
    position: relative;
    height: 100%;
    font-size: 1.3rem;

    &::after {
      @include fa-icon;

      position: absolute;
      right: 0;
      bottom: 0;
      width: 1rem;
      height: 1rem;
      font-size: 1rem;
    }

    &--encrypted {
      background-color: map_get($privacy-palette, 'super');

      &::after {
        content: $fa-var-lock;
      }
    }

    &--unencrypted {
      background-color: map_get($privacy-palette, 'good');
      color: $co-color__fg__text;

      &::after {
        content: $fa-var-unlock;
      }
    }
  }
}
