:host {
  display: inline-block;
  width: auto;
  cursor: pointer;
}

:host([full]) {
  display: block;
}

.button {
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  border-style: solid;
  border-width: var(--presto-player-button-border-width);
  font-family: var(--plyr-font-family, inherit);
  font-weight: var(--presto-player-button-font-weight, 500);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  vertical-align: middle;
  padding: 0;
  transition: var(--presto--player-transition-fast, 150ms) background-color, var(--presto-player-transition-fast, 150ms) color, var(--presto-player-transition-fast, 150ms) border, var(--presto--player-transition-fast, 150ms) box-shadow;
  cursor: inherit;
  border-radius: var(--presto-player-button-border-radius, 0.25em);
}
.button::-moz-focus-inner {
  border: 0;
}
.button:focus {
  outline: none;
}
.button.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.button.button--disabled * {
  pointer-events: none;
}
.button ::slotted(.presto--icon) {
  pointer-events: none;
}

.button__prefix,
.button__suffix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.button__label {
  display: flex;
  align-items: center;
}
.button__label ::slotted(presto-icon) {
  vertical-align: -2px;
}

.button.button--default {
  background-color: var(--presto-player-color-white, #fff);
  border-color: var(--presto-player-color-gray-300, #d1d5db);
  color: var(--presto-player-color-gray-600, #4b5563);
}
.button.button--default:hover:not(.button--disabled) {
  border-color: var(--presto-player-button-color, var(--plyr-color-main));
  color: var(--presto-player-button-color, var(--plyr-color-main));
  opacity: 0.75;
}
.button.button--default:focus:not(.button--disabled) {
  border-color: var(--presto-player-button-color, var(--plyr-color-main));
  color: var(--presto-player-button-color, var(--plyr-color-main));
  opacity: 1;
}
.button.button--default:active:not(.button--disabled) {
  border-color: var(--presto-player-button-color, var(--plyr-color-main));
  color: var(--presto-player-button-color, var(--plyr-color-main));
  opacity: 1;
}
.button.button--primary {
  background-color: var(--presto-player-button-color, var(--plyr-color-main));
  border-color: var(--presto-player-button-color, var(--plyr-color-main));
  color: var(--presto-player-button-text, #fff);
}
.button.button--primary:hover:not(.button--disabled) {
  opacity: 0.9;
}
.button.button--primary:focus:not(.button--disabled) {
  opacity: 1;
}
.button.button--primary:active:not(.button--disabled) {
  opacity: 1;
}

.button--text {
  background-color: transparent;
  border-color: transparent;
  color: var(--presto-player-button-color, var(--plyr-color-main));
}
.button--text:hover:not(.button--disabled) {
  background-color: transparent;
  border-color: transparent;
  opacity: 0.8;
}
.button--text:focus:not(.button--disabled) {
  background-color: transparent;
  border-color: transparent;
  opacity: 0.7;
}
.button--text:active:not(.button--disabled) {
  background-color: transparent;
  border-color: transparent;
  opacity: 0.7;
}

.button--small {
  font-size: var(--presto-player-button-font-size-small, 0.875em);
  height: var(--presto-player-button-height-small, 1.875em);
  line-height: calc(var(--presto-player-button-height-small, 1.875em) - var(--presto-player-button-border-width, 1px) * 2);
}

.button--medium {
  font-size: var(--presto-player-button-font-size-medium, 1em);
  height: var(--presto-player-button-height-medium, 2.5em);
  line-height: calc(var(--presto-player-button-height-medium, 2.5em) - var(--presto-player-button-border-width, 1px) * 2);
}

.button--large {
  font-size: var(--presto-player-button-font-size-large, 1.25em);
  height: var(--presto-player-button-height-large, 3.125em);
  line-height: calc(var(--presto-player-button-height-large, 3.125em) - var(--presto-player-button-border-width, 1px) * 2);
}

.button--full {
  display: block;
}

.button--has-label.button--small .button__label {
  padding: 0 var(--presto-player-button-spacing-small, 0.75em);
}
.button--has-label.button--medium .button__label {
  padding: 0 var(--presto-player-button-spacing-medium, 1em);
}
.button--has-label.button--large .button__label {
  padding: 0 var(--presto-player-button-spacing-large, 1.25em);
}

.button--has-prefix.button--small {
  padding-left: var(--presto-player-button-spacing-x-small, 0.5em);
}
.button--has-prefix.button--small .button__label {
  padding-left: var(--presto-player-button-spacing-x-small, 0.5em);
}
.button--has-prefix.button--medium {
  padding-left: var(--presto-player-button-spacing-small, 0.75em);
}
.button--has-prefix.button--medium .button__label {
  padding-left: var(--presto-player-button-spacing-small, 0.75em);
}
.button--has-prefix.button--large {
  padding-left: var(--presto-player-button-spacing-small, 0.75em);
}
.button--has-prefix.button--large .button__label {
  padding-left: var(--presto-player-button-spacing-small, 0.75em);
}

.button--has-suffix.button--small,
.button--caret.button--small {
  padding-right: var(--presto-player-button-spacing-x-small, 0.5em);
}
.button--has-suffix.button--small .button__label,
.button--caret.button--small .button__label {
  padding-right: var(--presto-player-button-spacing-x-small, 0.5em);
}
.button--has-suffix.button--medium,
.button--caret.button--medium {
  padding-right: var(--presto-player-button-spacing-small, 0.75em);
}
.button--has-suffix.button--medium .button__label,
.button--caret.button--medium .button__label {
  padding-right: var(--presto-player-button-spacing-small, 0.75em);
}
.button--has-suffix.button--large,
.button--caret.button--large {
  padding-right: var(--presto-player-button-spacing-small, 0.75em);
}
.button--has-suffix.button--large .button__label,
.button--caret.button--large .button__label {
  padding-right: var(--presto-player-button-spacing-small, 0.75em);
}