/* Slider Button */
.slider-button {
  --slider-btn-bg: var(--slider-btn-default-bg);
  --slider-btn-border: var(--slider-btn-default-border);
  --slider-btn-icon: var(--slider-btn-default-icon);
  --slider-btn-bg-hover: var(--slider-btn-default-bg-hover);
  --slider-btn-border-hover: var(--slider-btn-default-border-hover);
  --slider-btn-icon-hover: var(--slider-btn-default-icon-hover);
  --slider-btn-bg-disabled: var(--slider-btn-default-bg-disabled);
  --slider-btn-border-disabled: var(--slider-btn-default-border-disabled);
  --slider-btn-icon-disabled: var(--slider-btn-default-icon-disabled);
  --slider-btn-focus-inner: var(--slider-btn-default-focus-inner);
  --slider-btn-focus-outer: var(--slider-btn-default-focus-outer);
  --slider-btn-size: var(--slider-btn-size-medium);
  --slider-btn-icon-size: var(--slider-btn-icon-size-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--slider-btn-border);
  background: var(--slider-btn-bg);
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  text-decoration: none;
  color: var(--slider-btn-icon);
  font-family: var(--font-family-base);
}

.slider-button:hover:not(:disabled):not([aria-disabled='true']) {
  background-color: var(--slider-btn-bg-hover);
  border-color: var(--slider-btn-border-hover);
  color: var(--slider-btn-icon-hover);
}

.slider-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--slider-btn-focus-inner),
    0 0 0 5px var(--slider-btn-focus-outer);
}

.slider-button:active:not(:disabled):not([aria-disabled='true']) {
  background-color: var(--slider-btn-bg-hover);
  border-color: var(--slider-btn-border-hover);
  color: var(--slider-btn-icon-hover);
}

.slider-button:disabled,
.slider-button[aria-disabled='true'] {
  background-color: var(--slider-btn-bg-disabled);
  border-color: var(--slider-btn-border-disabled);
  color: var(--slider-btn-icon-disabled);
  cursor: not-allowed;
}

.slider-button svg,
.slider-button img {
  width: var(--slider-btn-icon-size);
  height: var(--slider-btn-icon-size);
  display: block;
}

.slider-button--medium {
  --slider-btn-size: var(--slider-btn-size-medium);
  --slider-btn-icon-size: var(--slider-btn-icon-size-medium);
  width: var(--slider-btn-size);
  height: var(--slider-btn-size);
}

.slider-button--large {
  --slider-btn-size: var(--slider-btn-size-large);
  --slider-btn-icon-size: var(--slider-btn-icon-size-large);
  width: var(--slider-btn-size);
  height: var(--slider-btn-size);
}

.slider-button--xlarge {
  --slider-btn-size: var(--slider-btn-size-xlarge);
  --slider-btn-icon-size: var(--slider-btn-icon-size-xlarge);
  width: var(--slider-btn-size);
  height: var(--slider-btn-size);
}