@use "../../../../src/scss/utilities.scss";
.bSliderStages {
  //border-bottom: solid 1px var(--f-aire);
  h2{
    color: var(--b-medianoche);
  }
  &__title {
    @extend %VFSans-font;
    font-size: 35px;
    font-weight: 600;
    line-height: 1.37;
    color: var(--b-medianoche);
  }
  &__thumbs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    .swiper-slide{
      min-width: 15%;
      &:first-child .bSliderStages__line{
        width: 50%;
        left: 50%;
      }
      &:last-child .bSliderStages__line{
        width: 50%;
      }
    }
  }
  &__item {
    cursor: pointer;
    width: 99px;
    height: 99px;
    border-radius: 50%;
    border: solid 1px var(--a-azul-unops);
    background-color: var(--bg-color-unops);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    &:hover {
      .bSliderStages__circle {
        background-color: var(--a-azul-unops);
      }
    }
  }
  .swiper-slide-thumb-active {
    .bSliderStages__circle {
      background-color: var(--a-azul-unops);
    }
  }
  .swiper-button-next,
  .swiper-button-prev {
    &::after {
      color: var(--a-azul-unops);
    }
  }
  .swiper-button-disabled::after {
    color: var(--f-aire);
  }
  &__circle {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background-color: var(--b-medianoche);
    position: relative;
  }
  &__number {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    @extend %VFSans-font;
    font-size: 35px;
    font-weight: 600;
    color: var(--a-blanco);
  }
  &__slider {
    &--description {
      display: flex;
      justify-content: center;
      flex-direction: column;
      position: relative;
      min-height: 167px;
    }
    &--number {
      @extend %VFSans-font;
      opacity: 0.07;
      font-family: VFSans;
      font-size: 124px;
      font-weight: 900;
      color: var(--a-azul-unops);
    }
    &--title{
      @extend %VFSans-font;
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--b-medianoche);
    }
  }
  &__line{
    position: absolute;
    top: calc(50% - 0.5px);
    left: 0;
    height: 1px;
    width: 100%;
    z-index: -1;
    background-color: var(--f-aire);
  }
}