ihk24/gfi-ihk-2024/stories/atoms/slider-tabs/slider-tabs.scss

@use '../../_global/styles/mixins' as *;
@use '../../_global/styles/vars' as *;

.controls, .rotationslider {
  .count {
    display: none;
  }

  .slider-tabs, .tabs {
    position: absolute;
    bottom: 1.8rem;
    left: 50%;
    right: 0;
    padding: 0;
    list-style: none;
    transform: translate(-50%, 0);
    text-align: center;
    font-size: 0;
    line-height: 0;
    margin: 0;

    li {
      display: inline-block;
      vertical-align: top;

      &.active button:before {
        background-color: var(--color-text);
        box-shadow: 0 0 0 2px var(--color-text);
      }
    }

    .btn {
      --button-min-size: 24px;
      font-size: 0;
      line-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      &::before {
        content: "";
        position: relative;
        display: block;
        width: 10px;
        height: 10px;
        border: 2px solid var(--color-text);
        border-radius: 5px;
        transition: 0.2s ease;
      }

      &::after {
        display: none;
      }

      &:hover {
        background-color: transparent;

        &::before {
          background-color: var(--color-text);
        }
      }
    }
  }

  button {
    border: 0;
    background-color: transparent;
    padding: 0;
    cursor: pointer;

    &.prev, &.next {
      position: absolute;
      top: -89px;
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      right: 0;
      color: var(--color-text);
      border-radius: 24px;
      background: var(--swatches-neutrals-white);
      --button-hover-shadow-opacity: 0.4;
      --button-hover-shadow-size: 6px;
      @media(max-width: 768px) {
        display: none;
      }

      &:before {
        @include icon-small-arrow-right-simple;
        font-family: "Icons", sans-serif;
        font-size: 30px;
        content: "\e825";
      }

      &:after {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: var(--border-radius-lg);
        box-shadow: 0 0 0 2px var(--color-surface-inset);
        opacity: 0;
        transition: 0.3s ease;
      }

      &:hover:after {
        opacity: 0.4;
        box-shadow: 0 0 0 6px var(--color-surface-inset);
      }
    }

    &.prev {
      right: 70px;
      transform: rotate(180deg);
    }
  }
}