/* Clearances
 * -------------------------------------------------------------------------- */

.clearances__trigger {
  @media (min-width: 40em) {
    position: absolute;
    top: -2rem;
    left: -2rem;
  }

  @media (min-width: 60em) {
    top: -3rem;
    left: -3rem;
  }
}

.clearances__intro {
  @media (min-width: 60em) { padding: 0 1.5rem; }
}

.clearances__unread {
  animation: wiggle 0.4s both;
}

.clearances__unread-yes {
  margin-right: 3px;
}

.clearance {
  &:not(:last-of-type) {
    border-bottom: 1px solid var(--color-border);
  }

  turbo-frame[busy] + .spinner { display: block; }
}

details.clearance:not([open]) .clearance__content { display: none; }

.clearance__body {
  padding: 1em 0 !important;
  align-items: center;

  @media (min-width: 60em) { padding: 0.5rem 0.5rem 0.5rem 0 !important; }
}

.clearance__content {
  grid-area: footer;
  margin: 1rem 0.5rem;
  padding: 1em 2em;
  background-color: var(--color-bg--surface-glint);
  border-radius: 0 1.5em 1.5em 1.5em;
  min-height: 6rem;

  [data-color-scheme="dark"] & {
    background: var(--color-bg--message-content);
    color: var(--color-txt--on-message-content);
  }

  .txt--subtle, .entry__time, .attachment__size {
    [data-color-scheme="dark"] & { color: var(--color-txt--subtle-on-message-content); }
  }
}

.clearances--reset {
  position: relative;
  margin: var(--quarter-space) 0 0;
  order: 0;
}

.clearances--reset__button {
  position: absolute;
  top: -0.35rem;
  right: 0;
  z-index: 4;
  padding: 0 0 0 0.8rem;
}

.clearance-toggle {
  position: relative;
  background: transparent;
  cursor: pointer;
  outline: none;
  padding: 0;
  max-width: 100%;
}

.clearance__actions {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-area: actions;
  font-size: var(--font-size-x-small);
  margin-top: var(--half-space) !important;

  @media (min-width: 40em) { margin-top: 0 !important; }
}

.clearance__actions--spam-spotters {
  .clearance__action {
    max-width: 10ch;
  }
}

.clearance__action {
  font-weight: 600 !important;
  min-width: 9ch;

  &::before { background-size: 1.7em !important; }
}

.clearance__action--yes {
  color: var(--color-tertiary) !important;
  background-color: var(--color-bg--tertiary-glint) !important;
  --color-action-group-action-focused: var(--color-bg--tertiary-glint);
  --color-action-group-action-hovered: var(--color-bg--tertiary-glint);
}

.clearance__action--no {
  color: var(--color-secondary) !important;
  background-color: var(--color-bg--secondary-glint) !important;
  --color-action-group-action-focused: var(--color-bg--secondary-glint);
  --color-action-group-action-hovered: var(--color-bg--secondary-glint);

  .clearances--emphasize &::before {
    background-image: url("/assets/icons/emphatic-no-f007e651.svg");
  }
}

.clearance__action--spam {
  color: var(--color-negative) !important;
  background-color: var(--color-bg--negative-glint-thin) !important;
  --color-action-group-action-focused: var(--color-bg--negative-glint-thin);
  --color-action-group-action-hovered: var(--color-bg--negative-glint-thin);
}

.clearance__action--spam-animated {
  &::after {
    position: absolute;
    content: "";
    inset: 0;
    background-image: linear-gradient(90deg, var(--color-bg--negative) 50%, transparent 50%),
        linear-gradient(90deg, var(--color-bg--negative) 50%, transparent 50%),
        linear-gradient(0deg, var(--color-bg--negative) 50%, transparent 50%),
        linear-gradient(0deg, var(--color-bg--negative) 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 1.5rem 0.2rem, 1.5rem 0.2rem, 0.2rem 1.5rem, 0.2rem 1.5rem;
    background-position: left top, right bottom, left bottom, right   top;
    animation: dancing-ants 0.5s infinite linear;
  }

  @media (prefers-reduced-motion) {
    &::after { animation: none; }
  }
}

.clearance-more {
  position: absolute;
  top: 0;
  right: 0;
}

.clearance-more__btn {
  border: 0 !important;
  top: 0;
  right: 0;

  &::before { background-size: 40% !important; }
}

.clearance__avatar {
  align-self: flex-start;
  margin-right: 0.6rem;

  @media (min-width: 40em) {
    margin-left: var(--base-space);

    .has-work-and-home & { margin-left: var(--one-and-a-half-space); }
  }
}

.clearance__preview {
  max-width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}

.clearance__sender {
  line-height: 1.3;
  margin: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-bottom: 0.1rem;
}

.clearance__email {
  word-wrap: break-word;
}

.clearance__detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.3;

  @media (min-width: 40em) {
    font-size: var(--font-size-small);
  }
}

.clearance__recipients {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-xx-small);
}

.clearance__timestamp { font-size: var(--font-size-xx-small) !important; }

.clearance__purpose {
  position: absolute !important;
  top: 1em !important;
  left: -1.4rem !important;

  &::before { filter: var(--colorize-border); }
}

.clearance--choose-again {
  animation: shake 0.3s both;
}

/* Screener History
 * -------------------------------------------------------------------------- */

.screener-history__key {
  display: grid;
  grid-template-columns: 50% 50%;
}

.screener-history__column {
  margin: 0 0.5rem;

  @media (min-width: 40em) { margin: 0 2rem; }

  &:first-child { text-align: right; }
}

.screener-history__clearances {
  @media (min-width: 40em) {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: url("/assets/wavy-vertical-ccee6ad7.svg") repeat-y center;
    background-size: auto 3.5rem;
    background-blend-mode: difference;
  }
}

.screener-history__date {
  border-bottom: 1px solid var(--color-border);
  padding: 0 0 0.25em;

  @media (min-width: 40em) {
    align-self: center;
    margin-top: var(--double-space);
    padding: 1em 2em 0.25em;
  }

  &:not(:first-child) { margin-top: var(--double-space); }
}

.screened-status {
  background: linear-gradient(135deg, var(--color-bg--surface) 0%, var(--color-bg--surface-glint) 100%);
  padding: 0.5em;
  border-radius: 3rem;
  border: 0 !important;
}

.screened-status--approved {
  background: linear-gradient(135deg, var(--color-bg--positive-glint) 0%, var(--color-bg--positive) 100%);
  align-self: flex-start !important;
}

.screened-person {
  display: grid;
  grid-template-columns: 2.5em auto 3em;
  align-items: center;

  @media (min-width: 40em) {
    width: 48%;
  }
}

.screened-person__details {
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
  padding: 0.1rem 0;
}

/* Speakeasy
 * -------------------------------------------------------------------------- */

.posting__content--speakeasy {
  padding-left: 1.33em !important;
  position: relative;

  &::before {
    filter: var(--colorize-green);
    content: "";
    width: 1em;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: center top / 1em no-repeat;
    background-image: url("/assets/icons/speakeasy-0c244a55.svg");
  }
}