@use 'shared' as *;

.toolbar-row {
  --toolbar-background-opacity: 0%;
  --toolbar-background-strength: 0;
  --toolbar-divider-space: clamp(6px, 1.8vw, 14px);
  --toolbar-top-max-width: 594px;
  --vibe-button-hit-size: 64px;

  display: grid;
  grid-template-areas:
    'previous controls next'
    'previous divider next'
    'previous buttons next';
  grid-template-columns:
    var(--vibe-button-hit-size)
    minmax(0, var(--toolbar-top-max-width))
    var(--vibe-button-hit-size);
  align-items: stretch;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding-inline: clamp(8px, 1.4vw, 14px);
  column-gap: 0;
  row-gap: 0;
  border-radius: 12px;
  color: rgb(245 250 244 / 92%);
  background-color: rgb(5 8 13 / var(--toolbar-background-opacity));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / calc(var(--toolbar-background-strength) * 16%)),
    inset 0 1px 0 rgb(255 255 255 / calc(var(--toolbar-background-strength) * 7%)),
    0 14px 34px rgb(0 0 0 / calc(var(--toolbar-background-strength) * 28%));
  backdrop-filter: blur(calc(var(--toolbar-background-strength) * 18px))
    brightness(calc(1 - var(--toolbar-background-strength) * 0.38))
    saturate(calc(1 - var(--toolbar-background-strength) * 0.18));
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  transition:
    backdrop-filter var(--transition-time-long),
    background-color var(--transition-time-long),
    box-shadow var(--transition-time-long);

  &::after {
    content: '';
    grid-area: divider;
    align-self: center;
    justify-self: center;
    width: min(100%, var(--toolbar-top-max-width));
    height: 1px;
    margin-block: var(--toolbar-divider-space);
    background: rgb(255 255 255 / 12%);
  }

  button {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    font: inherit;
    cursor: pointer;
    @include toolbar-button-transition();

    &:disabled {
      cursor: progress;
      opacity: 0.58;
    }

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

  > .toolbar-shell {
    grid-area: controls;
    display: grid;
    grid-template-areas: 'swatches';
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: min(100%, var(--toolbar-top-max-width));
    min-width: 0;
    padding: 8px 9px;
  }

  > .vibe-button {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--vibe-button-hit-size);
    height: auto;
    min-height: 72px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: rgb(255 255 255 / 70%);
    font-size: 0;
    line-height: 1;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 18px;
      height: 18px;
      border-color: currentColor;
      border-style: solid;
      border-width: 0 0 3px 3px;
      transform: translate(-35%, -50%) rotate(45deg);
    }

    &.next-vibe::before {
      border-width: 3px 3px 0 0;
      transform: translate(-65%, -50%) rotate(45deg);
    }

    &:hover {
      color: color-mix(in srgb, var(--accent-color) 70%, white);
    }

    &.previous-vibe:hover {
      transform: translateX(-2px);
    }

    &.next-vibe:hover {
      transform: translateX(2px);
    }
  }

  > .previous-vibe {
    grid-area: previous;
  }

  > .next-vibe {
    grid-area: next;
  }
}