fleeting-garden/src/style/_panels.scss

@use 'mixins' as *;

html > body > aside.control-dock > .info-page {
  width: min(100%, 520px);
  max-height: 200vh;
  max-height: 200dvh;
  margin: 0 auto 10px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 46%);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(252 255 249 / 94%), rgb(234 241 232 / 91%)),
    rgb(249 252 247 / 92%);
  color: rgb(18 28 24);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 58%),
    0 16px 42px rgb(0 0 0 / 30%),
    0 2px 10px rgb(0 0 0 / 18%);
  backdrop-filter: blur(16px) saturate(118%);
  transition:
    max-height var(--transition-time-long),
    opacity var(--transition-time-long),
    transform var(--transition-time-long),
    margin-bottom var(--transition-time-long);

  &:focus-visible {
    outline: 2px solid rgb(17 56 45);
    outline-offset: 3px;
    box-shadow:
      0 0 0 5px rgb(255 255 255 / 68%),
      inset 0 1px 0 rgb(255 255 255 / 58%),
      0 16px 42px rgb(0 0 0 / 30%),
      0 2px 10px rgb(0 0 0 / 18%);
  }

  .info-page__content {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 18px 20px 16px;
  }

  .info-page__header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 0.1rem;
  }

  .info-page__heading {
    min-width: 0;
  }

  .info-page__mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid rgb(42 74 65 / 24%);
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgb(255 255 255 / 74%), rgb(217 231 222 / 70%)),
      rgb(232 240 235);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 76%),
      0 5px 14px rgb(21 44 39 / 12%);

    &::before {
      content: '';
      width: 1rem;
      height: 1rem;
      background: rgb(19 57 48);
      mask: url('../../assets/icons/info.svg') center / contain no-repeat;
    }
  }

  .info-page__close {
    position: relative;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    border: 1px solid rgb(34 57 50 / 18%);
    border-radius: 8px;
    background: rgb(255 255 255 / 36%);
    cursor: pointer;
    transition:
      background-color var(--transition-time),
      border-color var(--transition-time),
      transform var(--transition-time);

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      width: 0.9rem;
      height: 0.9rem;
      margin: auto;
      background: rgb(28 45 39);
      mask: url('../../assets/icons/close.svg') center / contain no-repeat;
    }

    &:hover {
      border-color: rgb(34 57 50 / 30%);
      background: rgb(255 255 255 / 64%);
      transform: translateY(-1px);
    }

    &:focus-visible {
      outline: 2px solid rgb(17 56 45);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px rgb(255 255 255 / 72%);
    }
  }

  .info-page__eyebrow {
    margin-bottom: 0.12rem;
    color: rgb(73 91 85);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  h2 {
    overflow-wrap: break-word;
    margin-bottom: 0;
    color: rgb(9 21 17);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.18;
  }

  .info-page__main,
  .info-page__notes {
    max-width: 56ch;
    overflow-wrap: break-word;
    color: rgb(25 35 32);
    font-size: 0.95rem;
    line-height: 1.56;
  }

  .info-page__main {
    margin-bottom: 0;
    hyphens: auto;
  }

  .info-page__notes {
    display: grid;
    gap: 0.45rem;
    margin: 0.1rem 0;
    padding-left: 1.1rem;
    list-style: disc;

    li {
      padding-left: 0.1rem;
    }

    li::marker {
      color: rgb(25 108 82);
      font-size: 0.85em;
    }
  }

  a {
    color: rgb(0 83 105);
    font-weight: 700;
    text-decoration-color: rgb(0 83 105 / 34%);
    text-underline-offset: 0.18em;

    &:hover {
      text-decoration-color: currentColor;
    }

    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 3px;
    }
  }

  &.hidden {
    max-height: 0;
    margin-bottom: 0;
    border-color: transparent;
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
    transform: translateY(6px) scale(0.985);
    visibility: hidden;
  }

  @include on-small-screen {
    width: min(100%, 520px);

    .info-page__content {
      gap: 0.75rem;
      padding: 14px;
    }

    .info-page__main,
    .info-page__notes {
      font-size: 0.95rem;
      line-height: 1.52;
    }
  }
}