/*
  /asset/css/slick-edit.css
  slick調整用CSS
*/
.slick-track {
  display: flex;
}
.slick-slide {
  height: auto;
}
.slick-list {
  overflow: hidden;
}
.slick-arrow {
  width: 100%;
  top: auto;
}
.slick-prev,
.slick-next {
  width: 25px;
  height: 25px;
  position: absolute;
  bottom: -50px;
  display: block;
  z-index: 10;
  top: auto;
  &::before {
    content: "";
    width: 25px;
    height: 25px;
    border-radius: 30px;
    background-color: var(--rsaikenkanri-primary);
    position: absolute;
    bottom: 0;
  }
  &::after {
    position: absolute;
    z-index: 10;
    display: block;
    content: "";
    width: 8px;
    height: 8px;
    top: 50%;
    bottom: auto;
    margin: auto;
    border-bottom: 2px solid var(--white);
    border-left: 2px solid var(--white);
    transition: all ease 0.3s;
  }
}
.slick-prev {
  left: 70px;
  &::before {
    left: 0;
  }
  &::after {
    transform: translateY(-50%) rotate(45deg);
    @media screen and (max-width: 840px) {
      left: 10px;
    }
  }
}
.slick-next {
  right: 70px;
  &::before {
    right: 0;
  }
  &::after {
    transform: translateY(-50%) rotate(-135deg);
    @media screen and (max-width: 840px) {
      right: 10px;
    }
  }
}
.slick-dots {
  bottom: -35px;
  li {
    width: 8px;
    height: 8px;
    margin: 4px;
    button {
      width: 8px;
      height: 8px;
      &::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: var(--black);
        opacity: 0.2;
      }
    }
    &.slick-active button:before {
      background: var(--rsaikenkanri-primary);
    }
  }
}
.slick-pause {
  position: relative;
  bottom: 18px;
  color: transparent;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background-color: transparent;
  width: 25px;
  height: 20px;
  padding: 0;
  overflow: hidden;
  &::before {
    position: absolute;
    left: 0;
    content: "";
    width: 5px;
    height: 20px;
    background-color: var(--rsaikenkanri-primary);
    border-radius: 50px;
  }
  &::after {
    position: absolute;
    left: 15px;
    bottom: 0;
    content: "";
    width: 5px;
    height: 20px;
    background-color: var(--rsaikenkanri-primary);
    border-radius: 50px;
  }
  &.is-paused {
    background-color: var(--rsaikenkanri-primary);
    height: 20px;
    aspect-ratio: cos(30deg);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    &::after {
      display: none;
    }
  }
}