/* MAIL PANE */

@mixin read-msg {
  #mail-view {
    .msg-header {
      display: flex;
      flex-wrap: nowrap;

      top: 0;
      z-index: 10;
      background-color: white;
      font-size: 0.9em;
      padding: 0px 0;
      margin: 1px 0 0 0;
      .recipients {
        padding-bottom: 5px;
        line-height: 1.5em;
        i {
          padding: 0 5px;
        }
        .from {
          font-weight: 700;
        }
      }
      .close-mail-button {
        position: relative;
        float: none;
        flex-shrink: 0;
        display: inline-block;
        vertical-align: top;
        height: 27px;
        margin-right: 3px;
      }

      .full-view-header {
        display:inline-block;
        padding-top: 5px;
        width:95%;
        flex-shrink:1;
      }
      .headline-area {
        clear: both;
        border-top: 1px solid $lighter_gray;
      }
    }
    h3 {
      margin-bottom: 0;
    }
    .tagsArea {
      clear: both;
      margin: 0 0 10px;
      @include tags;
      ul li {
        &.tag:hover {
          &:before {
            content: "click to remove";
            text-transform: lowercase;
            font-size: 0.5rem;
            @include tooltip(18px, 8px);
          }
        }
      }
    }
  }
}

.bodyArea {
  padding: 10px 30px 0 30px;
}

.attachmentsAreaWrap {
  padding: 0 30px;

  .attachmentsArea {
    border-top: 1px solid $lighter_gray;
    padding: 10px 0 0;

    li {
        position: relative;
        display: block;
        border: 1px solid $border_light_grey;
        border-radius: 2px;
        background-color: $background_light_grey;
        margin-bottom: 8px;

      a {
        color: $attachment_text;
        display: block;
        text-decoration: none;
        line-height: inherit;
        padding: 4px 5px;

        &:hover, &:focus {
          i.download-icon {
            color: lighten($attachment_icon, 15);
          }

          color: $attachment_icon;
          outline: none;
        }

        i.download-icon {
          position: absolute;
          color: $attachment_icon;
          right: 0;
          padding: 7px 10px;
        }

        i.remove-icon {
          float: right;
          padding-right: 5px;
          padding-top: 7px;
          color: $medium_light_grey;
        }
      }
    }
  }
}

#mail-actions {
  text-align: right;
  padding: 10px 0;
  button {
    display: inline-block;
    display: inline;
    line-height: 2em;
    border: 1px solid $lighter_gray;
    &#reply-button-top {
      @include border-right-radius(0);
      padding: 0 20px;
    }
    &#view-more-actions {
      @include border-left-radius(0);
      padding: 0 5px;
      margin-left: -4px;
    }
    &:hover {
      @include btn-transition;
      background: darken($contrast, 5%)
    }
  }
  ul#more-actions {
    padding: 5px 0;
    width: 170px;
    text-align: left;
    display: block;
    position: absolute;
    background: $white;
    border: 1px solid $lighter_gray;
    right: 0;
    top: 40px;
    z-index: 10;
    li {
      span, a {
        padding: 5px 10px;
        display: block;
        &:hover {
          cursor: pointer;
          background: $contrast;
        }
      }
    }
  }
}