@import "../../helpers";
.sf-hero__control--left button.sf-button,
.sf-hero__control--right button.sf-button {
  border: none;
}
.sf-hero__control--left button.sf-button:hover,
.sf-hero__control--right button.sf-button:hover {
  background: none;
}
.sf-arrow {
  --button-width: 2.75rem;
  --button-height: 2.75rem;
  --button-padding: 0 0.625rem;
  --button-background: var(--c-light);
  --button-transition: background 150ms linear;
  --icon-color: var(--c-dark);
  --button-box-shadow: 0px 4px 4px var(--c-black);
  --box-shadow-transition-opacity-duration: 150ms;
  display: flex;
  align-items: center;
  justify-content: var(--arrow-justify-content, center);
  opacity: 0.6;
  &:hover {
    --button-background: var(--c-dark);
    --icon-color: var(--c-light);
    --button-box-shadow-opacity: 0.25;
    opacity: 1;
  }
  &:active {
    --button-background: var(--c-link);
  }
  &:disabled {
    --button-background: var(--c-light);
    --icon-color: var(--c-text-disabled);
  }
  &__icon {
    transform: var(--arrow-icon-transform);
  }
  &--long {
    --button-width: 4.375rem;
    --button-height: 2.5rem;
    --button-background: var(--c-text-disabled);
    --button-transition: transform 150ms linear;
    --arrow-justify-content: flex-start;
    &.sf-arrow--right {
      --arrow-justify-content: flex-end;
      --arrow-icon-transform: rotate(180deg) scale(0.855, 0.75);
      &:hover {
        transform-origin: center right;
      }
    }
  }
  &--transparent {
    --button-background: transparent;
    --button-box-shadow: none;
    &:hover {
      --button-background: transparent;
      --icon-color: var(--c-dark);
    }
    &:disabled {
      --button-background: transparent;
      --icon-color: var(--c-text-disabled);
    }
  }
  &--rounded {
    --button-border-radius: 100%;
  }
  &--no-shadow {
    --button-box-shadow: none;
  }
  &--right {
    --arrow-icon-transform: rotate(180deg);
  }
  &--top {
    --arrow-icon-transform: rotate(90deg);
  }
  &--down {
    --arrow-icon-transform: rotate(270deg);
  }
}