@use '../abstract';

$carousel-size: ('md', 'lg');

.cds-carousel-arrow {
  $this: &;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  @each $size in $carousel-size {
    &--#{$size} {
      width: if($size == 'md', 48px, 56px);
      height: if($size == 'md', 48px, 56px);
    } // size
  } // each

  &--left {
    transform: rotate(180deg);
  }

  @at-root &:not(#{$this}--arrow) {
    border-radius: 50%;
    border: 1px solid var(--gray-200);
    background-color: var(--base-white);

    &:hover {
      background-color: var(--gray-50);
      border-color: var(--gray-300);
    }

    &:disabled {
      background-color: var(--base-white);
      border-color: var(--gray-100);
    }

    &:not(:disabled) {
      cursor: pointer;
    }
  } // not arrow
}