.root {
  .v-theme--dark & {
    @include bg-color-fade($palette-primary-dark, 0.4)
  }
  .v-theme--light & {
    @include bg-color-lighten($palette-primary-light, 0.8)
  }
  padding: spacing(10, 0);
  position: relative;
  @include breakpoints-down(md) {
    padding: spacing(15, 0, 10)
  }
}

.carousel-handle {
  height: 380px;
  position: relative;
  z-index: 10
}

.carousel-wrap {
  position: absolute;
  z-index: 2;
  width: 100%;
  overflow: hidden;
}

.item {
  &:focus {
    outline: none
  }
}

.carousel-prop {
  @include breakpoints-down(md) {
    display: none;
    div {
      width: 1px;
    }
  }
  div {
    width: 500px
  }
}

.floating-title {
  position: absolute;
  width: 100%;
  left: 0;
  top: spacing(5);
  @include breakpoints-up(lg) {
    @include left($spacing3);
    top: $spacing1 * -10
  }
  @media (min-width: 1400px) {
    @include left($spacing10)
  }
  .title {
    @include breakpoints-up(md) {
      @include margin-right($spacing5)
    }
    @include breakpoints-up(lg) {
      @include float(right)
    }
    @media (min-width: 1400px) {
      @include margin-right($spacing5 * -1)
    }
  }
}

.arrow {
  .v-locale--is-rtl & {
    direction: rtl
  }
  .v-locale--is-ltr & {
    direction: ltr
  }
  margin-top: 140px;
  position: relative;
  z-index: 10;
  button {
    @include rtl-flip;
    @include palette-background-paper;
    margin: $spacing1 * 0.5;
    .v-theme--dark & {
      color: $palette-primary-light
    }
    .v-theme--light & {
      color: $palette-primary-dark
    }
  }
  @media (max-width: 1279px) {
    display: none
  }
  @include breakpoints-down(md) {
    display: none;
    margin-top: 560px
  }
}
