@import '../../../../scss/styles.scss';

.clickable-arrow {
  cursor: pointer;
  @extend %btn-reset;
  width: base(2);
  height: base(2);
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  outline: 0;
  padding: base(0.5);
  color: var(--theme-elevation-800);
  line-height: base(1);

  &:not(.clickable-arrow--is-disabled) {
    &:hover,
    &:focus-visible {
      background: var(--theme-elevation-100);
    }
  }

  &:focus-visible {
    outline: var(--accessibility-outline);
  }

  &--right {
    .icon {
      transform: rotate(-90deg);
    }
  }

  &--left .icon {
    transform: rotate(90deg);
  }

  &--is-disabled {
    cursor: default;

    .icon .stroke {
      stroke: var(--theme-elevation-400);
    }
  }
}