@use "lib/mixins";
@use "settings/controls";

// --------------------------------------------------------------
// Control buttons
// --------------------------------------------------------------

.plyr__control {
  background: transparent;
  border: 0;
  border-radius: controls.$plyr-control-radius;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible; // IE11
  padding: controls.$plyr-control-padding;
  position: relative;
  transition: all 0.3s ease;

  svg {
    display: block;
    fill: currentColor;
    height: controls.$plyr-control-icon-size;
    pointer-events: none;
    width: controls.$plyr-control-icon-size;
  }

  // Default focus
  &:focus {
    outline: 0;
  }

  // Tab focus
  &.plyr__tab-focus {
    @include mixins.plyr-tab-focus();
  }
}

// Remove any link styling
a.plyr__control {
  text-decoration: none;

  &::after,
  &::before {
    display: none;
  }
}

// Change icons on state change
.plyr__control:not(.plyr__control--pressed) .icon--pressed,
.plyr__control.plyr__control--pressed .icon--not-pressed,
.plyr__control:not(.plyr__control--pressed) .label--pressed,
.plyr__control.plyr__control--pressed .label--not-pressed {
  display: none;
}