/*
 * Styles the WooCommerce product audio player scaffold rendered by ProductAudioPlayer.
 * WaveSurfer binds into the wave container and consumes the exposed color tokens.
 */

@keyframes go-audio-loading-fade {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

.go-product-audio-player {
  --go-audio-wave-color: var(--wp--custom--swatches--grey--300);
  --go-audio-progress-color: var(--wp--custom--swatches--gold--300);
  --go-audio-cursor-color: var(--wp--preset--color--contrast);
  --go-audio-toggle-color: var(--wp--custom--swatches--grey--200);
  --go-audio-toggle-active-color: var(--wp--custom--swatches--grey--200);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block-start: 0;

  h4 {
    font-weight: 300;
    text-align: left;

    [data-go-audio-heading-note] {
      margin-inline-start: 0.5rem;
      font-size: 0.8em;
      font-weight: 300;
      letter-spacing: 0.01em;
    }
  }

  > div {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 0.25em;

    article {
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
      padding-bottom: 1.5rem;
      font-family: var(--wp--preset--font-family--exo);
      line-height: 1.3;
      text-transform: uppercase;
      letter-spacing: 0.03em;

      &:only-child {
        padding-top: 0.75rem;
      }

      &:not(:last-child) {
        border-bottom: 1px dotted var(--wp--custom--swatches--grey--400);
      }

      > [data-go-audio-meta] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 1.2rem;
        align-items: center;
        justify-content: space-between;

        > span:first-child {
          display: inline-flex;
          flex: 1 1 auto;
          gap: 0.35rem;
          min-width: 0;
          font-size: 14px;
          color: var(--wp--preset--color--contrast);
        }

        > span:last-child {
          flex: 0 0 auto;
          font-size: 12px;
          color: var(--wp--custom--swatches--grey--250);
        }

        a {
          color: var(--wp--preset--color--link);
          text-decoration: none;
          &:hover {
            text-decoration: underline;
          }
        }
      }

      > [data-go-audio-controls] {
        display: flex;
        gap: 1rem;
        align-items: center;

        > button[data-go-audio-toggle] {
          --go-audio-button-icon: var(--wp--custom--icons--btn-play);
          position: relative;
          flex: 0 0 auto;
          width: 2.25rem;
          height: 2.25rem;
          margin-left: -0.5rem;
          font-size: 0;
          color: transparent;
          cursor: pointer;
          background: transparent;
          border: none;

          &::before {
            display: block;
            width: 28px;
            height: 28px;
            content: "";
            background-color: var(--go-audio-toggle-color);
            mask-image: var(--go-audio-button-icon);
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
          }

          &[aria-pressed="true"] {
            --go-audio-button-icon: var(--wp--custom--icons--btn-pause);
          }

          &[aria-pressed="true"]::before {
            background-color: var(--go-audio-toggle-active-color);
          }

          &:disabled {
            cursor: default;
          }
        }

        > [data-go-audio-wave] {
          position: relative;
          display: flex;
          flex: 1 1 auto;
          align-items: center;
          align-self: center;
          min-height: 1.5rem;

          > [data-go-audio-loading] {
            position: absolute;
            inset-inline-start: 0;
            font-family: var(--wp--preset--font-family--exo);
            font-size: 0.7rem;
            font-weight: 300;
            color: var(--wp--custom--swatches--grey--200);
            text-transform: uppercase;
            letter-spacing: 0.15em;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            animation: none;
          }

          > :not([data-go-audio-loading]) {
            flex: 1 1 auto;
            width: 100%;
            min-width: 0;
            opacity: 1;
            transition: opacity 0.35s ease;
          }

          & ::part(scroll),
          & ::part(wrapper) {
            overflow: visible;
          }

          & ::part(cursor) {
            top: -6px;
            height: 37px;
          }
        }
      }

      &[data-go-audio-load-state="loading"] {
        > [data-go-audio-controls]
          > [data-go-audio-wave]
          > [data-go-audio-loading] {
          opacity: 1;
          animation: go-audio-loading-fade 1s ease-in-out infinite alternate;
        }

        > [data-go-audio-controls]
          > [data-go-audio-wave]
          > :not([data-go-audio-loading]) {
          opacity: 0;
        }
      }

      &:is(
          [data-go-audio-load-state="ready"],
          [data-go-audio-load-state="error"]
        ) {
        > [data-go-audio-controls]
          > [data-go-audio-wave]
          > [data-go-audio-loading] {
          display: none;
          opacity: 0;
          animation: none;
        }

        > [data-go-audio-controls]
          > [data-go-audio-wave]
          > :not([data-go-audio-loading]) {
          opacity: 1;
        }
      }

      > [data-go-audio-footer] {
        display: flex;
        justify-content: flex-end;

        [data-go-audio-remaining] {
          display: inline-block;
          min-width: 5ch;
          font-family: var(--wp--preset--font-family--exo);
          font-size: 12px;
          font-feature-settings: "tnum" 1;
          font-variant-numeric: tabular-nums;
          color: var(--go-audio-toggle-color);
          text-align: left;
          white-space: nowrap;
        }
      }
    }
  }
}