@import '../../../../styles/common';
@import '../../../../styles/vendor/bootstrap_foundation-sites';
@import '../../../../styles/vendor/bootstrap_font-awesome';

.m-draft-message-advanced {
  @include flex-grid-row($size: expand);

  background-color: #f6fcff;

  &__recipient-list {
    // margin-right: $co-margin;
    // margin-bottom: $co-margin;
    // margin-left: $co-margin;
  }

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

    width: 3.438rem;
    height: 3.438rem;
  }

  &__identity {
    // height: 3.438rem;
    margin-bottom: map_get($co-margin_, 'xsmall');
  }

  &__container {
    @include flex-grid-size;

    max-width: 100%;
    padding-right: map_get($co-margin_, 'xsmall');
    padding-left: map_get($co-margin_, 'xsmall');

    @include breakpoint(medium) {
      padding-right: map_get($co-margin_, 'xlarge');
      padding-left: map_get($co-margin_, 'xlarge');
    }
  }

  &__parent {
    margin-bottom: map_get($co-margin_, 'medium');
  }

  &__errors,
  &__action-send {
    @include flex-grid-size(12);

    padding-right: map_get($co-margin_, 'xsmall');
    background-color: $co-color__bg__action;

    @include breakpoint(medium) {
      padding-right: map_get($co-margin_, 'xlarge');
    }
  }

  &__errors {
    padding-bottom: map_get($co-margin_, 'small');
    text-align: center;
  }

  &__encryption {
    width: 100%;
    padding-right: map_get($co-margin_, 'xlarge');
    padding-left: map_get($co-margin_, 'xsmall');
    text-align: right;
  }

  &__action-send {
    text-align: right;
  }

  &__action-button {
    margin-top: map_get($co-margin_, 'small');
    margin-bottom: map_get($co-margin_, 'small');
    margin-left: map_get($co-margin_, 'xsmall');
  }

  &__button-send {
    position: relative;

    &::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;
      }
    }
  }

  &__subject,
  &__recipient-list,
  &__body,
  &__attachments {
    margin-bottom: $co-margin;
  }
}
