/* Theme Variables */
:root {
  /* Buttons width */
  --unscribe-button-min-width: calc(
    var(--unscribe-base-unit) * 43.5
  ); /* 174px */
  --unscribe-button-min-width-mobile-pinned: calc(
    var(--unscribe-base-unit) * 35
  ); /* 140px */
  --unscribe-size-widget-width: calc(
    var(--unscribe-base-unit) * 52.5
  ); /* 210px */
  --unscribe-size-widget-height: calc(var(--unscribe-base-unit) * 9); /* 36px */
  --unscribe-size-player-max-width: calc(
    var(--unscribe-base-unit) * 87.5
  ); /* 350px */
  --unscribe-size-dropdown-min-width: calc(
    var(--unscribe-base-unit) * 32
  ); /* 128px */
  --unscribe-size-dropdown-max-width: calc(
    var(--unscribe-base-unit) * 101
  ); /* 404px */
  --unscribe-size-mobile-player-max-width: calc(
    var(--unscribe-base-unit) * 96
  ); /* 384px */

  /* Semantic Colors */
  --unscribe-bg-primary: var(--unscribe-color-base);
  --unscribe-bg-secondary: var(--unscribe-color-surface);
  --unscribe-bg-border: var(--unscribe-color-surface-muted);
  --unscribe-text-primary: var(--unscribe-color-text-base);
  --unscribe-text-secondary: var(--unscribe-color-text-muted);
  --unscribe-text-accent: var(--unscribe-color-text-accent);
  --unscribe-interactive-primary: var(--unscribe-color-text-accent);
  --unscribe-interactive-hover: var(--unscribe-color-surface);
  --unscribe-interactive-focus: var(--unscribe-color-surface-accent) /
    var(--unscribe-color-opacity-medium);
  --unscribe-overlay-backdrop: var(--unscribe-color-base-inverted) /
    var(--unscribe-color-opacity-medium);
  --unscribe-overlay-focus: var(--unscribe-color-surface-accent) /
    var(--unscribe-color-opacity-medium);
  --unscribe-overlay-muted: var(--unscribe-color-text-accent) /
    var(--unscribe-color-opacity-subtle);
  --unscribe-shadow-sm: var(--unscribe-color-base-inverted) /
    var(--unscribe-color-opacity-subtle);
  --unscribe-shadow-md: var(--unscribe-color-base-inverted) /
    var(--unscribe-color-opacity-medium);

  /* Border Styles */
  --unscribe-border-width: var(--unscribe-base-border-width);
  --unscribe-border-1: var(--unscribe-border-width) solid
    var(--unscribe-bg-border);
  --unscribe-border-none: none;

  /* Spacing */
  --unscribe-spacing-1: var(--unscribe-base-unit); /* 4px */
  --unscribe-spacing-2: calc(var(--unscribe-base-unit) * 2); /* 8px */
  --unscribe-spacing-3: calc(var(--unscribe-base-unit) * 3); /* 12px */
  --unscribe-spacing-4: calc(var(--unscribe-base-unit) * 4); /* 16px */
  --unscribe-spacing-6: calc(var(--unscribe-base-unit) * 6); /* 24px */
  --unscribe-mobile-player-container-padding-bottom: calc(
    var(--unscribe-base-unit) * 8
  ); /* 32px */
  --unscribe-drawer-margin-top: calc(var(--unscribe-base-unit) * 24); /* 96px */

  /* Border Radius */
  --unscribe-radius-base: var(--unscribe-base-radius);
  --unscribe-radius-full: 9999px;

  /* Font Sizes */
  --unscribe-font-xs: calc(var(--unscribe-base-font-size) * 0.57); /* 8px */
  --unscribe-font-sm: calc(var(--unscribe-base-font-size) * 0.86); /* 12px */
  --unscribe-font-base: var(--unscribe-base-font-size); /* 14px */

  /* Font Weights */
  --unscribe-font-normal: 400;
  --unscribe-font-medium: 500;

  /* Line Heights */
  --unscribe-leading-none: var(--unscribe-base-line-height);

  /* Transitions */
  --unscribe-transition-fast: calc(var(--unscribe-base-transition) * 0.75);
  --unscribe-transition-normal: var(--unscribe-base-transition);

  /* Z-index */
  --unscribe-z-index: var(--unscribe-base-z-index);

  /* Sizes */
  --unscribe-size-icon-sm: calc(var(--unscribe-base-unit) * 3); /* 12px */
  --unscribe-size-icon-base: calc(var(--unscribe-base-unit) * 4); /* 16px */
  --unscribe-size-button-base: calc(var(--unscribe-base-unit) * 9); /* 36px */
  --unscribe-size-slider-thumb: calc(var(--unscribe-base-unit) * 3); /* 12px */
  --unscribe-size-slider-track: calc(var(--unscribe-base-unit) * 1.5); /* 6px */
  --unscribe-size-slider-progress: var(--unscribe-base-unit); /* 4px */
  --unscribe-size-drawer-handle: calc(var(--unscribe-base-unit) * 2); /* 8px */
  --unscribe-size-drawer-handle-width: calc(
    var(--unscribe-base-unit) * 25
  ); /* 100px */
  --unscribe-size-brand-link: calc(
    var(--unscribe-base-unit) * 17 + var(--unscribe-base-border-width)
  ); /* 68px + 1px */
  --unscribe-size-time-display: calc(var(--unscribe-base-unit) * 12); /* 48px */

  /* Opacity */
  --unscribe-opacity-50: var(--unscribe-color-opacity-medium);
  --unscribe-opacity-100: var(--unscribe-color-opacity-full);

  /* Box Shadow */
  --unscribe-shadow-button: 0 1px 2px 0 var(--unscribe-shadow-sm);
  --unscribe-shadow-dropdown: 0 4px 6px -1px var(--unscribe-shadow-md),
    0 2px 4px -2px var(--unscribe-shadow-md);
  --unscribe-shadow-focus: 0 0 0 3px var(--unscribe-interactive-focus);
  --unscribe-shadow-focus-lg: 0 0 0 4px var(--unscribe-interactive-focus);

  /* Animation */
  --unscribe-animation-spin: unscribe-spin 1s linear infinite;
  --unscribe-animation-pulse: unscribe-pulse 2s cubic-bezier(0.4, 0, 0.6, 1)
    infinite;
  --unscribe-animation-fade-in: unscribe-fadeIn 0.2s ease-in-out;
  --unscribe-animation-fade-out: unscribe-fadeOut 0.2s ease-in-out;
  --unscribe-animation-slide-in: unscribe-slideIn 0.3s
    cubic-bezier(0.4, 0, 0.2, 1);
  --unscribe-animation-slide-out: unscribe-slideOut 0.3s
    cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animations */
/* Animation keyframes */
@keyframes unscribe-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes unscribe-fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes unscribe-slideIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes unscribe-slideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes unscribe-zoomIn {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}

@keyframes unscribe-zoomOut {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.95);
  }
}

@keyframes unscribe-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes unscribe-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Common Button Styles */
unscribe-widget::part(player-button),
unscribe-widget::part(player-speed-button),
unscribe-widget::part(desktop-play-button),
unscribe-widget::part(desktop-menu-button),
unscribe-widget::part(mobile-play-button),
unscribe-widget::part(mobile-menu-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--unscribe-font-family);
  font-size: var(--unscribe-font-base);
  line-height: var(--unscribe-leading-none);
  font-weight: var(--unscribe-font-medium);
  transition: all var(--unscribe-transition-normal);
  flex-shrink: 0;
  outline: none;
  border: var(--unscribe-border-1);
  background-color: var(--unscribe-bg-primary);
  box-shadow: var(--unscribe-shadow-button);
  color: var(--unscribe-color-text-base);
}

/* Specific Button Styles */
unscribe-widget::part(player-button) {
  border-radius: var(--unscribe-radius-full);
  background-color: var(--unscribe-bg-secondary);
  color: var(--unscribe-text-primary);
  gap: var(--unscribe-spacing-2);
  width: var(--unscribe-size-button-base);
  height: var(--unscribe-size-button-base);
  border: none;
  cursor: pointer;
}

unscribe-widget::part(player-speed-button) {
  padding: var(--unscribe-spacing-1) var(--unscribe-spacing-3);
  font-size: var(--unscribe-font-sm);
  height: auto;
  background-color: var(--unscribe-bg-secondary);
  gap: var(--unscribe-spacing-2);
  border-radius: var(--unscribe-radius-base);
  border: none;
  cursor: pointer;
}

unscribe-widget::part(desktop-play-button) {
  cursor: pointer;
  border-radius: var(--unscribe-radius-base);
  padding: var(--unscribe-spacing-1) var(--unscribe-spacing-2);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  position: relative;
  width: auto;
  min-width: var(--unscribe-button-min-width);
  justify-content: flex-start;
  gap: var(--unscribe-spacing-1);
}

unscribe-widget::part(desktop-menu-button) {
  cursor: pointer;
  border-radius: var(--unscribe-radius-base);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  position: relative;
  left: calc(var(--unscribe-border-width) * -1);
  width: var(--unscribe-size-button-base);
  height: var(--unscribe-size-button-base);
}

unscribe-widget::part(mobile-play-button) {
  cursor: pointer;
  border-radius: var(--unscribe-radius-base);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: var(--unscribe-spacing-1) var(--unscribe-spacing-2);
  position: relative;
  width: auto;
  justify-content: flex-start;
  gap: var(--unscribe-spacing-1);
  min-width: var(--unscribe-button-min-width);
  height: var(--unscribe-size-button-base);
}

unscribe-widget[data-pinned="true"]::part(mobile-play-button) {
  min-width: var(--unscribe-button-min-width-mobile-pinned);
}

unscribe-widget::part(mobile-menu-button) {
  cursor: pointer;
  border-radius: var(--unscribe-radius-base);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  position: relative;
  left: calc(var(--unscribe-border-width) * -1);
  width: var(--unscribe-size-button-base);
  height: var(--unscribe-size-button-base);
}

/* Button Hover States */
unscribe-widget::part(player-button):hover {
  background-color: var(--unscribe-text-primary);
  color: var(--unscribe-bg-secondary);
}

unscribe-widget::part(desktop-play-button):hover,
unscribe-widget::part(desktop-menu-button):hover,
unscribe-widget::part(mobile-play-button):hover,
unscribe-widget::part(mobile-menu-button):hover {
  background-color: var(--unscribe-bg-secondary);
  color: var(--unscribe-text-accent);
}

/* Button Focus States */
unscribe-widget::part(player-button):focus-visible {
  border-color: var(--unscribe-interactive-focus);
  box-shadow: var(--unscribe-shadow-focus);
}

unscribe-widget::part(desktop-play-button):focus-visible,
unscribe-widget::part(desktop-menu-button):focus-visible,
unscribe-widget::part(mobile-play-button):focus-visible,
unscribe-widget::part(mobile-menu-button):focus-visible {
  z-index: var(--unscribe-z-index);
}

/* Button Disabled States */
unscribe-widget::part(player-button):disabled,
unscribe-widget[data-player-loading="true"]::part(player-speed-button),
unscribe-widget::part(player-speed-button):disabled {
  opacity: var(--unscribe-opacity-50);
  cursor: not-allowed;
}

/* Icon Styles */
unscribe-widget::part(player-button-icon-loading),
unscribe-widget::part(player-button-icon-play),
unscribe-widget::part(player-button-icon-pause),
unscribe-widget::part(desktop-menu-button-icon),
unscribe-widget::part(mobile-menu-button-icon),
unscribe-widget::part(widget-play-button-icons-headphones-icon),
unscribe-widget::part(widget-play-button-icons-loader-icon) {
  width: var(--unscribe-size-icon-base);
  height: var(--unscribe-size-icon-base);
  pointer-events: none;
  flex-shrink: 0;
}

/* Special Icon Adjustments */
unscribe-widget::part(player-button-icon-loading),
unscribe-widget::part(widget-play-button-icons-loader-icon) {
  animation: var(--unscribe-animation-spin);
}

unscribe-widget::part(player-button-icon-play) {
  margin-left: 2px;
}

unscribe-widget::part(widget-play-button-icons-loader-icon) {
  margin-left: var(--unscribe-spacing-1);
  width: var(--unscribe-size-icon-sm);
  height: var(--unscribe-size-icon-sm);
}

/* Slider Styles */
unscribe-widget::part(player-progress-slider-root) {
  position: relative;
  display: flex;
  width: 100%;
  touch-action: none;
  align-items: center;
  user-select: none;
}

unscribe-widget[data-player-disabled="true"]::part(
    player-progress-slider-root
  ) {
  opacity: var(--unscribe-opacity-50);
}

unscribe-widget::part(player-progress-slider-track) {
  background-color: var(--unscribe-bg-secondary);
  position: relative;
  flex-grow: 1;
  overflow: hidden;
  border-radius: var(--unscribe-radius-full);
  height: var(--unscribe-size-slider-track);
  width: 100%;
}

unscribe-widget::part(player-progress-slider-progress) {
  position: absolute;
  height: var(--unscribe-size-slider-progress);
  background-color: var(--unscribe-overlay-muted);
  border-radius: var(--unscribe-radius-full);
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
}

unscribe-widget[data-player-loading="true"]::part(
    player-progress-slider-progress
  ) {
  animation: var(--unscribe-animation-pulse);
  opacity: var(--unscribe-opacity-50);
}

unscribe-widget::part(player-progress-slider-range) {
  background-color: var(--unscribe-interactive-primary);
  position: absolute;
  height: 100%;
}

unscribe-widget::part(player-progress-slider-thumb) {
  background-color: var(--unscribe-interactive-primary);
  box-shadow: 0 0 0 1px var(--unscribe-interactive-focus);
  display: block;
  width: var(--unscribe-size-slider-thumb);
  height: var(--unscribe-size-slider-thumb);
  flex-shrink: 0;
  border-radius: var(--unscribe-radius-full);
  box-shadow: var(--unscribe-shadow-button);
  transition:
    color var(--unscribe-transition-fast),
    box-shadow var(--unscribe-transition-fast);
}

unscribe-widget::part(player-progress-slider-thumb):hover {
  box-shadow: var(--unscribe-shadow-focus-lg);
}

unscribe-widget::part(player-progress-slider-thumb):focus-visible {
  outline: none;
  box-shadow: var(--unscribe-shadow-focus-lg);
}

unscribe-widget[data-player-disabled="true"]::part(
    player-progress-slider-thumb
  ) {
  pointer-events: none;
  opacity: var(--unscribe-opacity-50);
}

/* Dropdown Styles */
unscribe-widget::part(desktop-dropdown-content) {
  background-color: var(--unscribe-bg-primary);
  max-width: var(--unscribe-size-dropdown-max-width);
  color: var(--unscribe-text-primary);
  margin-top: var(--unscribe-spacing-2);
  z-index: var(--unscribe-z-index);
  min-width: var(--unscribe-size-dropdown-min-width);
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  border-radius: var(--unscribe-radius-base);
  border: var(--unscribe-border-1);
  padding: var(--unscribe-spacing-2) var(--unscribe-spacing-1);
  box-shadow: var(--unscribe-shadow-dropdown);
}

unscribe-widget[data-desktop-dropdown-open="open"]::part(
    desktop-dropdown-content
  ) {
  animation: var(--unscribe-animation-fade-in);
}

/* unscribe-widget[data-desktop-dropdown-open="closed"]::part(
    desktop-dropdown-content
  ) {
  animation: var(--unscribe-animation-fade-out);
} */

/* Mobile Drawer Styles */
unscribe-widget::part(mobile-drawer-overlay) {
  position: fixed;
  inset: 0;
  z-index: var(--unscribe-z-index);
  background-color: var(--unscribe-overlay-backdrop);
}

unscribe-widget::part(mobile-drawer-handle) {
  content: "";
  background-color: var(--unscribe-bg-secondary);
  margin: var(--unscribe-spacing-4) auto 0;
  height: var(--unscribe-size-drawer-handle);
  width: var(--unscribe-size-drawer-handle-width);
  flex-shrink: 0;
  border-radius: var(--unscribe-radius-full);
}

unscribe-widget::part(mobile-drawer-content) {
  background-color: var(--unscribe-bg-primary);
  position: fixed;
  z-index: var(--unscribe-z-index);
  display: flex;
  height: auto;
  flex-direction: column;
  inset-inline: 0;
  bottom: 0;
  margin-top: var(--unscribe-drawer-margin-top);
  max-height: 80vh;
  border-top-left-radius: var(--unscribe-radius-base);
  border-top-right-radius: var(--unscribe-radius-base);
  border-top: var(--unscribe-border-1);
}

unscribe-widget[data-mobile-drawer-open="open"]::part(mobile-drawer-content) {
  animation: var(--unscribe-animation-slide-in);
}

/* unscribe-widget[data-mobile-drawer-open="closed"]::part(mobile-drawer-content) {
  animation: var(--unscribe-animation-slide-out);
} */

/* Player Styles */
unscribe-widget::part(player-root) {
  display: flex;
  align-items: center;
  gap: var(--unscribe-spacing-2);
  width: 100%;
  max-width: var(--unscribe-size-player-max-width);
  padding: var(--unscribe-spacing-2);
  padding-right: var(--unscribe-spacing-4);
}

unscribe-widget::part(player-progress-container) {
  flex-grow: 1;
  margin: 0 var(--unscribe-spacing-2);
  position: relative;
}

unscribe-widget::part(player-time-display) {
  font-family: var(--unscribe-font-family-time);
  font-size: var(--unscribe-font-sm);
  color: var(--unscribe-text-secondary);
  width: var(--unscribe-size-time-display);
  text-align: right;
  flex-shrink: 0;
}

unscribe-widget::part(player-brand-link) {
  font-family: var(--unscribe-font-family);
  background-color: var(--unscribe-bg-secondary);
  color: var(--unscribe-text-secondary);
  text-align: center;
  font-size: var(--unscribe-font-xs);
  padding: var(--unscribe-spacing-1) 0;
  text-transform: uppercase;
  width: var(--unscribe-size-brand-link);
  text-decoration: none;
}

/* Widget Styles */
unscribe-widget::part(widget-root) {
  width: var(--unscribe-size-widget-width);
  height: var(--unscribe-size-widget-height);
}

/* Desktop Styles */
unscribe-widget::part(desktop-root) {
  display: none;
}

unscribe-widget::part(desktop-dropdown-root) {
  z-index: var(--unscribe-z-index);
  position: relative;
  display: flex;
}

unscribe-widget[data-pinned="true"]::part(desktop-dropdown-root) {
  position: fixed;
  bottom: var(--unscribe-spacing-6);
  left: var(--unscribe-spacing-6);
}

unscribe-widget::part(desktop-player-container) {
  display: flex;
  align-items: center;
  width: 100%;
  flex: 1;
  min-width: var(--unscribe-size-dropdown-max-width);
}

/* Mobile Styles */
unscribe-widget::part(mobile-root) {
  display: block;
}

unscribe-widget::part(mobile-drawer-root) {
  z-index: var(--unscribe-z-index);
  position: relative;
  display: flex;
}

unscribe-widget[data-pinned="true"]::part(mobile-drawer-root) {
  position: fixed;
  bottom: var(--unscribe-spacing-6);
  left: var(--unscribe-spacing-6);
}

unscribe-widget::part(mobile-player-container) {
  margin: 0 auto;
  padding-top: var(--unscribe-spacing-4);
  padding-bottom: var(--unscribe-mobile-player-container-padding-bottom);
  display: flex;
  width: 100%;
  max-width: var(--unscribe-size-mobile-player-max-width);
}

/* Empty Container Styles */
unscribe-widget::part(widget-play-button-icons-headphones-container) {
}

unscribe-widget::part(widget-play-button-icons-loader-container) {
}

/* Media Queries */
@media (min-width: 768px) {
  unscribe-widget::part(desktop-root) {
    display: block;
  }

  unscribe-widget::part(mobile-root) {
    display: none;
  }

  unscribe-widget::part(player-speed-button) {
    border-top-left-radius: var(--unscribe-radius-base);
    border-top-right-radius: var(--unscribe-radius-base);
  }

  unscribe-widget::part(player-brand-link) {
    position: absolute;
    background-color: var(--unscribe-bg-secondary);
    transform-origin: top right;
    top: 100%;
    right: calc(var(--unscribe-base-border-width) * -1);
    transform: rotate(90deg);
    border-top-left-radius: var(--unscribe-radius-base);
    border-top-right-radius: var(--unscribe-radius-base);
    line-height: calc(
      var(--unscribe-font-sm) + (var(--unscribe-radius-base) / 2)
    );
  }
}