@layer theme, utilities;

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

:root {
  --white: white;
  --black: black;
  --blue: #0067ff;
  --blue-alt: rgb(0, 152, 212);
  --green: lime;
  --green-alt: rgb(0, 162, 0);
  --red: crimson;
  --yellow: #ffe700;
  --lightgrey: lightgray;
  --grey: grey;
  --darkgrey: #3e3e3e;
}

@layer theme {
  body {
    font-family: sans-serif;
    user-select: none;
    margin: 1rem;
  }

  h1 {
    margin: 0;
    text-box: trim-both cap alphabetic;
  }

  button, .button {
    cursor: pointer;
    border-radius: 0;
    border: 0.1rem solid var(--grey);
    background-color: var(--white);
    text-decoration: none;
    color: var(--black);
    font-size: small;
    padding: 0.1rem 0.5rem;
  }

  input[type="range"] {
    appearance: none;
    cursor: pointer;
    border-radius: 0.3rem;
    background-color: var(--grey);
  }

  input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    background-color: var(--white);
    border-radius: 0.3rem;
    height: 1rem;
    width: 1rem;
  }

  select {
    font-size: large;
  }
}

@layer utilities {
  app-header {
    display: flex;
    align-items: center;
    gap: 1em;

    .badge {
      background-color: var(--red);
      color: var(--white);
      border-radius: 0.5em;
      padding: 0.4em 0.9em;
      font-size: small;
      font-weight: bold;

      &.connected {
        background-color: var(--blue);
      }
    }
  }

  .mix-select {
    display: flex;
    flex-direction: row;
    gap: 0.5em;

    label {
      &:has(input:checked) {
        background-color: var(--green);
      }

      font-size: larger;
      padding: 0.2em 1em;
      white-space: nowrap;
      border: 2px solid var(--grey);
      display: flex;
      align-self: center;
      gap: 0.5em;

      input {
        margin: 0;
      }
    }
  }

  stein-mixer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  stein-mixer div {
    display: flex;
    gap: 0.2em;

    stereo-input {
      display: flex;
      flex-direction: column;

      .stereo-toggle {
        background-color: var(--grey);
        width: 100%;
        max-height: 2em;
        

        :has(input:checked) {
          background-color: var(--yellow);
        }

        label {
          height: 100%;
          display: flex;
          width: 100%;
          justify-content: center;
          align-items: center;

          svg {
            height: 100%;
          }
        }
      }
    }

    channel-strip {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1em;
      padding: 0.2em;
      padding-top: 1em;
      background-color: var(--lightgrey);
      justify-content: flex-end;

      fx-section {
        display: flex;
        gap: 0.2em;

        vu-meter {
          height: 8em;
          display: flex;
          background: var(--black);
          width: 1.2em;
          align-items: self-end;
          position: relative;

          .momentary-overlay{
            height: 0em;
            background-color: var(--green);
            position: relative;
            bottom: 0;
            width: 100%;
          }

          .max-bar {
            background-color: var(--white);
            height: 0.2em;
            width: 100%;
            position: absolute;
          }
        }

        .controls {
          display: flex;
          flex-direction: column;

          button {
            display: flex;
            justify-content: center;

            svg {
              width: 1.25rem;
            }
          }

          .hpf-button {
            &.enabled {
              background: var(--green);
            }
          }

          .invert-phase-button {
            &.enabled {
              background: var(--green);
            }
          }

          select {
            font-size: small;
            width: 4.2em;
          }
        }
      }

      pan-slider {
        display: flex;
        flex-direction: column;
        align-items: center;

        input[type="range"] {
          width: 6em;
          height: 1em;
          appearance: none;
          background-color: var(--green-alt);
          cursor: pointer;
          border-radius: 0.3rem;
        }
    
        input[type="range"]::-webkit-slider-thumb {
          appearance: none;
          background-color: var(--white);
          border-radius: 0.3rem;
          height: 1rem;
          width: 1rem;
        }
      }

      send-slider {
        display: flex;
        flex-direction: column;
        align-items: center;

        input[type="range"] {
          width: 6em;
          height: 1em;
          appearance: none;
          background-color: var(--blue-alt);
          cursor: pointer;
          border-radius: 0.3rem;
        }
    
        input[type="range"]::-webkit-slider-thumb {
          appearance: none;
          background-color: var(--white);
          border-radius: 0.3rem;
          height: 1rem;
          width: 1rem;
        }
      }

      .daw-reverb-placeholder {
        height: 36px;
      }

      volume-slider {
        display: grid;
        grid-template: "a b" "c c";
        flex-direction: column;
        align-items: center;
        gap: 0.8em;
        width: 100%;

        .buttons {
          display: flex;
          flex-direction: column;
          background-color: transparent;
          align-self: self-start;
          align-items: center;

          button {
            background-color: var(--grey);
            font-weight: bold;
            border: 0.15rem solid black;
            cursor: pointer;
            width: 2.2rem;
            aspect-ratio: 1;
            font-size: larger;
          }

          .solo-button.active {
            background-color: var(--yellow);
          }

          .mute-button.active {
            background-color: var(--red);
          }

          .phantom-voltage-indicator {
            background-color: var(--grey);
            border: 0.15rem solid var(--black);
            width: 1.5rem;
            box-sizing: border-box;
            aspect-ratio: 1;
            font-size: small;
            display: flex;
            align-items: center;
            border-radius: 100%;
            margin-top: 4em;

            &.enabled {
              background-color: var(--red);
            }
          }

          .phantom-voltage-indicator-label {
            font-size: small;
          }
        }
      
        input[type="range"] {
          writing-mode: vertical-lr;
          direction: rtl;
          height: 15em;
          width: 1em;
          appearance: none;
          background-color: var(--black);
          cursor: pointer;
          border-radius: 0.3rem;
        }

        input[type="range"]::-webkit-slider-thumb {
          appearance: none;
          margin-top: -12px; /* Centers thumb on the track */
          background-color: var(--blue);
          border-radius: 0.3rem;
          height: 3.5rem;
          width: 2rem;
        }

        .volume-level {
          grid-area: c;
          text-align: center;
        }
        
      }

      .title {
        text-transform: uppercase;
        color: var(--darkgrey);
        font-weight: bold;
      }
    }
  }

  channel-strip[type="master"] volume-slider input[type="range"]::-webkit-slider-thumb {
    background-color: var(--red);
  }

  channel-fx {
    background-color: var(--lightgrey);
    width: fit-content;
    padding: 1em;
    display: flex;
    flex-direction: row;
    gap: 1em;

    .channel-fx-panel {
      display: flex;
      flex-direction: column;

      h2 {
        margin-top: 0;
        margin-bottom: 0.5em;
      }
  
      .settings {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-start;
        padding: 0;
        max-height: 22rem;
  
        input, select {
          display: block;
          width: 10rem;
        }
  
        & > * {
          max-width: 10em;
        }
  
        & > label {
          display: flex;
          flex-direction: column;
  
          span {
            font-size: smaller;
          }
        }
  
        .description {
          display: block;
          font-size: small;
          word-break: break-word;
        }
      }
    }
  }

  master-reverb, interface-settings {
    background-color: var(--lightgrey);
    width: fit-content;
    padding: 1em;
    display: flex;
    flex-direction: column;

    h2 {
      margin-top: 0;
      margin-bottom: 0.5em;
    }

    .settings {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: flex-start;
      padding: 0;
      max-height: 22rem;

      input, select {
        display: block;
        width: 10rem;
      }

      & > * {
        max-width: 10em;
      }

      & > label {
        display: flex;
        flex-direction: column;

        span {
          font-size: smaller;
        }
      }

      .description {
        display: block;
        font-size: small;
        word-break: break-word;
      }
    }

    .settings.horizontal {
      flex-direction: row;

      input, select {
        width: auto;
      }

      label {
        display: flex;
        gap: 0.4em;
      }
    }
  }

  .settings {
    padding: 1em;
    gap: 1em;
    font-size: large;
    font-family: sans-serif;

    h2, h3, h4 {
      margin: 0;
    }
  }
  
  .setting {
    display: flex;
    flex-direction: column;
  }
}