/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for AudioSetup component */
@layer components {
  .audio-setup {
    --vu-bg: var(--color-surface-variant, #f3f4f6);
    --vu-fill: var(--color-primary, #6366f1);

    padding-block: var(--space-2xl);
    min-height: 80vh;

    & .audio-setup__container {
      max-width: 40rem;
      margin-inline: auto;
    }

    & .audio-setup__header {
        text-align: center;
        margin-bottom: var(--space-xl);
    }

    & .audio-setup__title {
      font-size: var(--size-step-3);
      font-family: var(--font-serif);
      line-height: 1.1;
      margin-bottom: var(--space-s);
    }

    & .audio-setup__subtitle {
      font-size: var(--size-step-1);
      color: var(--color-text);
      opacity: 0.8;
      max-width: 40ch;
      margin-inline: auto;
    }

    & .audio-setup__card {
      background: var(--color-surface);
      border: 1px solid var(--color-surface-variant);
      border-radius: var(--radius-m);
      padding: var(--space-l);
      box-shadow: var(--shadow-m);
      width: 100%;
    }

    & .audio-setup__field {
      margin-block: var(--space-m);
    }

    & .audio-setup__label {
      display: block;
      margin-bottom: var(--space-xs);
      font-weight: bold;
    }

    & .audio-setup__select {
      width: 100%;
    }

    & .audio-setup__vu-container {
      margin-block: var(--space-m);
    }

    & .audio-setup__vu-bar-wrapper {
      background: var(--vu-bg);
      height: 1rem;
      border-radius: var(--radius-pill);
      overflow: hidden;
      margin-top: var(--space-xs);
    }

    & .audio-setup__vu-bar {
      height: 100%;
      background: var(--vu-fill);
      width: 0%;
      transition: width 0.1s ease-out;
    }

    & .audio-setup__actions {
      display: flex;
      gap: var(--space-s);
      margin-top: var(--space-l);
    }

    & .audio-setup__feedback {
      margin-top: var(--space-m);
      padding: var(--space-s);
      border-radius: var(--radius-s);
      background: var(--color-surface-variant);
      font-size: var(--size-step-0);
    }

    & .audio-setup__error {
      margin-top: var(--space-s);
      color: var(--color-error);
      font-weight: bold;
    }

    & .text-success { color: var(--color-success); }
    & .text-warning { color: var(--color-warning); }
  }
}