@use "sass:map";
@use "global/acms-common" as acms;
@use "global/common" as global;

/* ------------------------------
　　splide.cssの上書き
------------------------------ */
.main-visual-slider {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  .splide__slide {
    overflow: hidden;
  }

  .splide__controls {
    display: flex;
    gap: 8px 24px;
    align-items: center;
    justify-content: center;
    height: 5.125rem;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .splide__pagination {
    position: static;
    display: flex;
    gap: 8px;
    padding: 0;
  }

  .splide__pagination__page {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: 0;

    &,
    &:hover {
      opacity: 1; /* リセット */
    }

    &::after {
      box-sizing: border-box;
      width: 0.875rem;
      height: 0.875rem;
      content: "";
      background-color: var(--color-white);
      border: 1px solid var(--color-primary);
      border-radius: 50%;

      @media (hover: hover) {
        transition: background-color 0.3s ease;
      }
    }

    @media (hover: hover) {
      &:hover::after {
        background-color: var(--color-gray10);
      }
    }

    &.is-active {
      background-color: transparent;
      transform: none;

      &::after {
        background-color: var(--color-primary);
        border-color: var(--color-white);
      }

      @media (hover: hover) {
        &:hover::after {
          background-color: var(--color-primary-hover);
        }
      }
    }
  }

  .splide__track,
  .splide__list,
  .splide__slide,
  .splide__slide picture,
  .splide__slide img {
    width: 100%;
    height: 100%;
  }

  .splide__slide picture,
  .splide__slide img {
    object-fit: cover;
  }

  .splide__toggle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    background-color: var(--color-primary);
    border: 1px solid var(--color-white);
    border-radius: 50%;

    .splide__toggle__play,
    .splide__toggle__pause {
      width: 100%;
      height: 100%;
      content: '';

      &:hover {
        cursor: pointer;
      }
    }

    .splide__toggle__play {
      width: 1rem;
      height: 1rem;
      background-color: var(--color-white);
      mask-image: url("#{global.$root-theme-img}icon/play-triangle.svg");
      mask-size: contain;
    }

    .splide__toggle__pause {
      width: 1rem;
      height: 1rem;
      background-color: var(--color-white);
      mask-image: url("#{global.$root-theme-img}icon/stop.svg");
      mask-size: contain;
    }

    @media (hover: hover) {
      transition: background-color 0.3s ease;

      &:hover {
        background-color: var(--color-primary-hover);
      }
    }
  }
}
