@use '../../utils' as *;

.doctor {

  &__background {
    position: relative;

    &:after {
      position: absolute;
      background: var(--rr-color-100);
      width: 100%;
      content: "";
      left: 0;
      top: 0;
      height: 55%;
    }
  }

  &__content {
    max-width: 630px;
    margin-right: auto;
    margin-left: auto;
  }

  &__slider-dot {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    z-index:1;
    justify-content: center;

    .swiper-pagination-bullet {
      width: 24px;
      height:24px;
      padding: 0;
      margin: 0 !important;
      @include border-radius(500px);
      overflow: hidden;
      background: transparent;
      display: flex;
      position: relative;
      border: 2px solid transparent;
      @extend %rr-transition-3;
      opacity: 1;

      &:after {
        position:absolute;
        width: 10px;
        height: 10px;
        content: "";
        top: calc(50% - 5px);
        background: var(--rr-theme-primary);
        @include border-radius(500px);
        left: calc(50% - 5px);
      }

      &-active {
        border-color: var(--rr-theme-primary);

        &:after {
          background: var(--rr-theme-primary);
        }
      }
    }
  }

  &__item {

    &-media {
      overflow: hidden;
      @include border-radius(20px);
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    &-content {

      &-text {
        margin-top: -76px;
        padding: 30px 20px 35px;
        border: 1px solid #E4E5E5;
        @include border-radius(20px);
        background: var(--rr-common-white);
        width: calc(100% - 60px);
        left: 30px;
        z-index: 2;
        position: relative;

        p {
          margin-bottom: 5px;
        }
      }

      &-share {
        padding: 11.5px 20px;
        gap: 33px;
        z-index: 1;
        opacity: 0;
        bottom: 96px;
        left: 50%;
        display: flex;
        list-style: none;
        position: absolute;
        text-align: center;
        justify-content: center;
        @include border-radius(500px);
        @include transform(translateX(-50%));
        background-color: var(--rr-common-white);
        transition: all 0.4s ease-in-out;

        a {
          i {
            color: var(--rr-color-900);
            font-size: 16px;
          }

          &:hover {
            i {
              color: var(--rr-theme-primary);
            }
            svg path {
              fill: var(--rr-theme-primary);
            }
          }
        }
      }
    }

    &:hover {

      .doctor__item-content-share {
        visibility: visible;
        opacity: 1;
        bottom: 153px;
      }
    }
  }
}