#toyoten-color {
  bottom: 0;
  left: 0;
  font-size: 1rem;
  background-color: #fffc;
  box-shadow: 0 0 2rlh #0003;
  backdrop-filter: blur(0.1rlh);
  z-index: 99;
  position: fixed;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 50lvh;
  /* padding-block: 0.5rlh calc(100lvh - 100svh + 0.5rlh); */
  padding-block: 0.5rlh;
  padding-inline: 0.5rlh;
  transition-property: translate, opacity;
  transition-duration: 0.25s;
  transition-timing-function: ease;
  translate: 0 10%;
  opacity: 0;
  display: flex;
  pointer-events: none;

  &.active {
    translate: 0;
    opacity: 1;
    pointer-events: auto;
  }

  @media(orientation: landscape) {
    translate: -10%;
    height: 100lvh;
    width: 50lvw;
    padding-left: calc(100lvw - 100svw + 0.5rlh);
  }

  @media(min-width: 992px) {
    position: sticky;
    flex-direction: row;
    height: auto;
    width: 100%;
    padding-inline: 0;
    translate: 0;
    opacity: 1;
    transition: none;
    pointer-events: auto;
  }

  > div {
    display: contents;

    @media(min-width: 992px) {
      display: flex;
      width: fit-content;
    }

    > div {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      justify-items: center;

      @media(min-width: 992px) {
        display: flex;
        width: fit-content;
      }
    }
  }

  button:not(:where(#toyoten-color_close)),
  input {
    border: none;
    cursor: pointer;
    height: 1.5rlh;
    width: auto;
    border-radius: 100lvmax;
    aspect-ratio: 1/1;
    margin-block: 0.5rlh;

    &::-webkit-color-swatch {
      border: none;
    }

    @media(min-width: 992px) {
      height: 1rlh;
      margin-block: 0;
      margin-inline: 0.5rlh;
    }
  }

  div:has(>input) {
    grid-column: 3/4;
    position: relative;
    margin-block: 0.5rlh;

    @media(min-width: 992px) {
      margin-block: 0;
      margin-inline: 0.5rlh;
    }
  }

  input {
    border-radius: 0;
    aspect-ratio: 2/1;
    margin: 0;
  }

  input + svg {
    position: absolute;
    top: -0.375em;
    right: -0.375em;
    height: 1em;
    width: auto;
    font-size: 1.5rlh;
    pointer-events: none;

    @media(min-width: 992px) {
      font-size: 1rlh;
    }
  }
}

#toyoten-color_close {
  border: none;
  background: none;
  height: 1.5rlh;
  width: 1.5rlh;
  position: absolute;
  top: 1rlh;
  right: 1rlh;
  transition: scale 0.25s ease;

  @media(any-hover:hover) {
    &:hover {
      scale: 1.25;
    }
  }

  @media(min-width: 992px) {
    display: none;
  }

  div {
    position: absolute;
    inset: 0;
    background: #252525;
    clip-path: inset(0 40%);
    rotate: 45deg;

    & + & {
      rotate: -45deg;
    }
  }
}

#toyoten-color-opener {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  pointer-events: none;
  display: flex;
  justify-content: start;
  align-items: center;
  z-index: 99;
  font-size: 1.25rem;

  :where(button) {
    pointer-events: auto;
    writing-mode: vertical-rl;
    height: auto;
    width: auto;
    border: none;
    background-color: #252525cc;
    color: white;
    backdrop-filter: blur(0.1rlh);
    box-shadow: 0 0 2rlh #0003;
    padding: 1rem 0.5rem;
    transition-property: translate, color, background;
    transition-duration: 0.25s;
    transition-timing-function: ease;

    @media(any-hover:hover) {
      &:hover {
        background-color: #fffc;
        color: #252525;
      }
    }
  }

  @media(min-width: 992px) {
    display: none;
  }
}

:has(#toyoten-color.active) #toyoten-color-opener button {
  translate: calc(-100% - 2rlh);
}