@import "ui-variables";

.quoted-text-control {
  color: @text-color-very-subtle;
  display: inline-block;
  border: 1px solid fade(@text-color-very-subtle, 15%);
  border-radius: 3px;
  line-height: 10px;
  padding: 6px 10px;
  font-weight: 600;
  font-size: @font-size-smaller;

  &.no-quoted-text {
    display:none;
  }

  &:hover {
    cursor: pointer;
    color: @text-color-subtle;
    border: 1px solid fade(@text-color-subtle, 35%);
  }

  &:before {
    content:'\2022\2022\2022';
    font-size: @font-size-smaller * 0.8;
    top:-1px;
    position:relative;
    padding-right:8px;
  }
  &.show-quoted-text:after {
    content:'Hide previous';
  }
  &:after {
    content:'Show previous';
  }
}

.mail-label {
  font-size: 0.9em;
  padding: 2px 8px;
  margin-right: 6px;
  flex-shrink: 0;
  border-radius: 3px;
  display: inline-block;
  cursor:default;
  line-height: 22px;
  -webkit-user-select: none;
}
.mail-label.removable {
  padding-left:12px;
  padding-right:4px;
  .inner {
    position: relative;
    left:0;
    transition: left 0.05s linear;
  }
  .x {
    opacity: 0;
    left:-4px;
    top:-3px;
    position: relative;
    display:inline-block;
    transition: opacity 0.05s ease-in;
  }
}
.mail-label.removable:hover {
  .inner {
    left:-6px;
  }
  .x {
    opacity: 1;
  }
}