@import "./styles/reset.css";
@import "./styles/variables.css";
@import "./styles/globals.css";

body {
  font-size: 16px;
  font-family: var(--font-main);

  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@media (min-width: 601px), (min-height: 901px) {
  main {
    box-shadow: 5px 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 1rem;
    overflow: hidden;
  }
  .drawer {
    border-top-left-radius: 0.9rem;
  }
  .controls {
    border-top-right-radius: 0.9rem;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #21222c;
  }
}

main {
  flex: 1;
  width: min(600px, 100%);
  max-height: 900px;
  background-color: #336174;

  display: grid;
  grid-template:
    "drawer controls" 1fr
    "base base" var(--base) /
    1fr var(--controls);
}

.drawer {
  grid-area: drawer;

  display: grid;
  grid-template:
    "top top led" 1fr
    ". cassette dir" min(100%, var(--cassette-height))
    ". bottom ." 1fr
    / 1fr var(--cassette-width) 2fr;

  background: linear-gradient(-20deg, #1c2575, #363e8a);
  color: white;

  /* Bevels */
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.4);
  border-right-color: rgba(0, 0, 0, 0.3);
}

.controls {
  grid-area: controls;
  background: red;

  background-color: #c6c6e0;

  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: column;

  /* Bevels */
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.4);
  border-left-color: rgba(0, 0, 0, 0.4);

  & :is(.top, .bottom) {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.5rem;
  }

  & .top {
    flex-direction: column;
  }

  & .bottom {
    flex-direction: column-reverse;
  }
}

.base {
  grid-area: base;
  background: blue;

  background-color: #28317f;
  color: white;

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  gap: 1rem;

  /* Bevels */
  border: 2px solid rgba(255, 255, 255, 0.4);
  /* border-top-color: rgba(0, 0, 0, 0.4); */
  border-top-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.4);
  border-right-color: rgba(0, 0, 0, 0.3);

  & label {
    font-size: 1.5rem;
  }

  & select {
    background: none;
    color: currentColor;
    border: 2px solid white;
    border-radius: 0.5rem;
    flex: 1;
    padding: 0.5rem;

    &:focus {
      text-decoration: underline;
      outline: 2px dashed currentColor;
    }
    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
      font-style: italic;
    }
  }
}

.brand {
  grid-area: top;
  padding: 1.5rem;
  line-height: 1;
  font-size: 1.5rem;
  font-family: var(--font-mono);
}

#status_light {
  grid-area: led;
  align-self: flex-start;
  justify-self: flex-end;
  margin: 1.5rem;
}

.cassette {
  grid-area: cassette;
  background-color: #454952;
  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.5);
}

.direction {
  grid-area: dir;
  justify-self: center;
  align-self: center;
  transform: rotate(270deg);

  & svg {
    width: 3rem;
    height: auto;
  }
}

.stereo {
  grid-area: bottom;
  justify-self: center;
  align-self: center;

  & svg {
    width: 100%;
    height: auto;
  }
}

.flow > * + * {
  margin-block-start: var(--flow, 1em);
}

specs-icon svg {
  height: 0.75em;
  height: 1.2cap;
  width: 0.75em;
  width: 1.2cap;
}

tape-levels {
  height: 8rem;
  background: rgba(255, 255, 255, 0.4);
}

status-led {
  --led: var(--color, red);

  width: 3rem;
  height: 3rem;
  background-image: radial-gradient(circle, #59575f 20%, #312b43 100%);
  border-radius: 50%;
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
  transition:
    300ms ease box-shadow,
    300ms ease background-image;

  --shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.2);
  box-shadow: var(--shadow);

  &[data-on] {
    box-shadow:
      var(--shadow),
      0 0 15px 5px color-mix(in srgb, var(--led) 50%, transparent);
    background-image: radial-gradient(
      circle,
      var(--led) 20%,
      color-mix(in srgb, var(--led) 60%, white) 100%
    );
  }
}

#record {
  color: #d83636;
}