@import '@glidejs/glide/src/assets/sass/glide.core';

.glide {
  &__arrow {
    z-index: 2;
    opacity: .7;
    cursor: pointer;
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    line-height: 1;
    transition: opacity .2s;
    background: transparent;
    color: var(--secondary);
    border: none;

    @media (hover: hover) {
      &:hover {
        opacity: .9;
      }
    }

    @media (max-width: 767.98px) {
      font-size: 1.75rem;
    }
    @media (min-width: 768px) and (max-width: 991.98px) {
      font-size: 2.25rem;
    }
    @media (min-width: 992px) {
      font-size: 3rem;
    }

    &:focus {
      outline: none;
      box-shadow: none;
    }

    &--left {
      @media (max-width: 767.98px) {
        left: .5rem;
      }
      @media (min-width: 768px) and (max-width: 991.98px) {
        left: 1rem;
      }
      @media (min-width: 992px) {
        left: 1.5rem;
      }
    }

    &--right {
      @media (max-width: 767.98px) {
        right: .5rem;
      }
      @media (min-width: 768px) and (max-width: 991.98px) {
        right: 1rem;
      }
      @media (min-width: 992px) {
        right: 1.5rem;
      }
    }

    &--disabled {
      opacity: 0.33;
    }
  }

  &__arrows--outer .glide__arrow {
    &--left {
      @media (max-width: 575.98px) {
        left: -15px;
      }
      @media (min-width: 576px) and (max-width: 1199.98px) {
        left: -30px;
      }
      @media (min-width: 1200px) {
        left: -45px;
      }
    }

    &--right {
      @media (max-width: 575.98px) {
        right: -15px;
      }
      @media (min-width: 576px) and (max-width: 1199.98px) {
        right: -30px;
      }
      @media (min-width: 1200px) {
        right: -45px;
      }
    }
  }

  &__bullets {
    position: absolute;
    z-index: 2;
    left: 50%;
    display: inline-flex;
    list-style: none;
    transform: translateX(-50%);

    @media (max-width: 767.98px) {
      bottom: .5rem;
    }
    @media (min-width: 768px) and (max-width: 991.98px) {
      bottom: 1rem;
    }
    @media (min-width: 992px) {
      bottom: 1.75rem;
    }
  }

  &__bullet {
    z-index: 3;
    opacity: .6;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 0;
    transition: opacity .15s ease, background-color .2s, border .2s;
    background: var(--secondary-lightest);
    border: 1.5px solid var(--secondary-light);
    width: 1rem;
    height: .6rem;
    border-radius: .3rem;
    margin-left: .25rem;

    &:first-child {
      margin-left: 0;
    }

    @media (min-width: 768px) {
      width: 1.6rem;
      margin-left: .3rem;

      &:hover {
        border-color: var(--secondary);
        background-color: var(--secondary);
        opacity: .9;
      }
    }

    @media (min-width: 992px) {
      width: 2rem;
      height: .8rem;
      border-radius: .4rem;
      margin-left: .4rem;
    }

    &:focus {
      outline: none;
    }
  }

  .glide__bullet--active {
    cursor: auto;
    border-color: var(--secondary);
    background-color: var(--secondary-lighter);
    opacity: .8;
  }

  &--swipeable {
    cursor: grab;
  }

  &--dragging {
    cursor: grabbing;
  }
}