.stickies {
  padding-bottom: 10rem;
  margin: var(--one-and-a-half-space) calc((var(--page-padding) * 2) + var(--one-and-a-half-space) );
  pointer-events: none;

  .box-cover__content-swap & { display: none; }
}

.stickies__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
  gap: var(--base-space);
  pointer-events: none;

  @media (min-width: 40em) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 60em) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stickies__menu {
  position: absolute;
  top: var(--page-padding);
  left: var(--page-padding);
  z-index: 5;
  display: none;
  pointer-events: auto;

  .sheet--box-cover-active & { display: initial; }
  .sheet--box-cover-active.sheet--box-cover-peeking & { display: none; }
}

.stickies__menu-btn {
  background-color: rgba(var(--rgb-background), 0.6); /* --color-bg--sheet with transparency */

  &::before {
    filter: var(--colorize-ink);
    background-size: 60%;
  }
}

.sticky {
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
  box-shadow: var(--color-shadow--dark) 0 2rem 2.5rem, var(--color-shadow--dark) 0 1rem 1rem -0.5rem;
  color: var(--color-txt);
  background: var(--color-bg--note-opaque);
  cursor: initial;
  pointer-events: auto;

  [data-color-scheme="dark"] & {
    color: var(--color-txt--reversed);
    box-shadow: var(--color-shadow) 0 2rem 2.5rem, var(--color-shadow) 0 1rem 1rem -0.5rem;
  }
}

.sticky--new {
  animation: pop-open 0.2s ease-in-out;
}

.sticky--medium {
  aspect-ratio: initial;
  @media (min-width: 40em) { grid-column: span 2; }
}

.sticky--large {
  aspect-ratio: initial;
  @media (min-width: 40em) { grid-column: span 2; }
  @media (min-width: 60em) { grid-column: span 3; }
}

.sticky__content {
  padding: var(--base-space) var(--base-space) var(--double-space);
  overflow: auto;

  p {
    margin: 0 0 1.4em;

    &:first-child {
      margin-top: 0;
      &::first-line { font-weight: 700; }
    }

    &:last-child { margin-bottom: 0; }
  }

  a {
    color: var(--color-txt--action);
    text-decoration: underline;
  }
}

.sticky__input {
  flex: 1;

  .sticky--medium &,
  .sticky--large & {
    flex: 1 1 auto;
  }

  [data-color-scheme="dark"] & {
    &::-webkit-input-placeholder { color: var(--color-txt--subtle-reversed); }
    &::-moz-placeholder { color: var(--color-txt--subtle-reversed); }
    &:-ms-input-placeholder { color: var(--color-txt--subtle-reversed); }
    &::placeholder { color: var(--color-txt--subtle-reversed); }
  }
}

.sticky__footer { padding: var(--half-space) var(--base-space); }

.sticky__actions-container {
  position: absolute;
  left: var(--quarter-space);
  right: var(--quarter-space);
  bottom: var(--quarter-space);
  text-align: right;

  &.copy-to-clipboard--success {
    position: absolute !important;
  }

  .copy-to-clipboard__success-message {
    background: var(--color-txt);
    color: var(--color-txt--reversed);
    opacity: 0.9;

    [data-color-scheme="dark"] & {
      background: var(--color-txt--reversed);
      color: var(--color-txt);
    }
  }
}

.sticky__sizer {
  border: 1px solid var(--color-txt);
  border-radius: 0.2em;
  margin: var(--half-space) auto calc(var(--base-space) * -1);
  background: var(--color-bg--note-opaque);
  position: relative;
  box-shadow: var(--color-bg--note-opaque) 0 0 1.5rem 0.5rem;

  [data-color-scheme="dark"] & {
    border-color: var(--color-txt--reversed);
  }

  label {
    display: grid;
    height: 1em;
    width: 1em;
    border-right: 1px solid var(--color-txt);
    place-content: center;
    position: relative;
    z-index: 3;

    [data-color-scheme="dark"] & {
      border-right-color: var(--color-txt--reversed);
    }

    &:last-of-type { border: none; }

    &:nth-of-type(2) {
      z-index: 2;

      input:checked {
        width: 2.42em;
        margin-left: -0.5em;
      }
    }

    &:nth-of-type(3) {
      z-index: 1;

      input:checked {
        width: 4em;
        margin-left: -1em;
        border-top-right-radius: 0.1em;
        border-bottom-right-radius: 0.1em;
      }
    }

    input {
      content: '';
      width: 0.93em;
      height: 1em;
      border-color: var(--color-tertiary);
      font-size: inherit;
      cursor: pointer;

      &:checked {
        border-color: var(--color-tertiary);
        background-color: var(--color-tertiary);
      }
    }
  }
}

.sticky--ghosted {
  opacity: 0.3;
  outline: 3px dashed var(--color-txt);
}