.carousel-cell {
  width: 100%;
  margin-right: $margin-normal;
}

.main-carousel {
  background: inherit;
  overflow: hidden;

  .flickity-prev-next-button {
    top: 96%;
    background: inherit;
    height: 50px;
    width: 50px;

    .flickity-button-icon {
      fill: $color-blue-400;
    }

    &:active,
    &:hover {
      background: inherit;
      opacity: 1;
    }

    &:focus {
      box-shadow: none;
    }

    &.previous {
      left: -12px;

      .flickity-button-icon {
        top: 10%;
      }
    }

    &.next {
      right: -12px;
    }
  }
}

.weather-carousel {
  .flickity-prev-next-button {
    top: 10%;
    height: 40px;
    width: 40px;
    background: transparent;

    &:active,
    &:hover {
      background: transparent;
    }

    @include breakpoint(sm) {
      top: 11%;
    }

    @include breakpoint(lg) {
      top: 13%;
    }
  }

  .months-row {
    justify-content: center;
    align-items: center;
    margin: 0 $margin-triple;

    .prev-month,
    .next-month {
      display: none;
    }

    @include breakpoint(sm) {
      justify-content: space-between;

      .prev-month,
      .next-month {
        display: block;
      }
    }
  }
}

.location {
  .weather-carousel {
    .months-row {
      justify-content: center;
    }

    .prev-month,
    .next-month {
      display: none;
    }
  }
}