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

@layer payload-default {
  .clickable-arrow {
    cursor: pointer;
    @extend %btn-reset;
    width: base(1.5);
    height: base(1.5);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    outline: 0;
    padding: base(0.25);
    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);
      }
    }
  }
}