// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * @summary Initiates a carousel component
 * @name base
 * @selector .slds-carousel
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-carousel {
  position: relative;
}

/**
 * @summary Main stage for carousel's tab-panels and tab-list inidicators
 * @selector .slds-carousel__stage
 * @restrict .slds-carousel div
 */
.slds-carousel__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/**
 * @summary Tabpanel region that contains all carousel panels
 * @selector .slds-carousel__panels
 * @restrict .slds-carousel__stage div
 */
.slds-carousel__panels {
  display: flex;
  transition: transform 250ms ease-in;
  min-height: 0%;
}

/**
 * @summary Tabpanel region that contains all carousel panels
 * @selector .slds-carousel__panels
 * @restrict .slds-carousel__stage div
 */
.slds-carousel__panel {
  flex: 0 0 100%;
  max-width: 100%;
}

/**
 * @summary Actionable element that contains the carousel's tab-panel content
 * @selector .slds-carousel__panel-action
 * @restrict .slds-carousel__stage a
 */
.slds-carousel__panel-action {
  display: block;
  border: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
  border-radius: $border-radius-medium;
  margin: $spacing-xx-small;

  &:focus,
  &:focus-visible {
    outline: 0;
  }
  
  &:focus {
    box-shadow: var(--slds-g-shadow-outset-focus-1);
  }
}

/**
 * @summary Element that contains the image inside the carousel's tab-panel
 * @selector .slds-carousel__image
 * @restrict .slds-carousel__panel-action div
 */
.slds-carousel__image {
  border-top-left-radius: $border-radius-medium;
  border-top-right-radius: $border-radius-medium;
  overflow: hidden;

  > img {
    width: 100%;
  }
}

/**
 * @summary Element that contains the content inside the carousel's tab-panel
 * @selector .slds-carousel__content
 * @restrict .slds-carousel__panel-action div
 */
.slds-carousel__content {
  background: var(--slds-g-color-neutral-base-100, #{$carousel-color-background});
  padding: $spacing-small;
  border-bottom-left-radius: $border-radius-medium;
  border-bottom-right-radius: $border-radius-medium;
  text-align: center;
  height: 6.625rem;
  overflow-x: hidden;
  overflow-y: auto;
}

/**
 * @summary Heading element that contains the title of the carousel's tab-panel
 * @selector .slds-carousel__content-title
 * @restrict .slds-carousel__content h2
 */
.slds-carousel__content-title {
  font-size: $font-size-5;
  font-weight: 600;
}

/**
 * @summary List element that contains the carousel's tab-list inidicators
 * @selector .slds-carousel__indicators
 * @restrict .slds-carousel ul
 */
.slds-carousel__indicators {
  align-self: center;
  margin: $spacing-x-small 0;
}

/**
 * @summary Carousel's tab-list inidicator items
 * @selector .slds-carousel__indicator
 * @restrict .slds-carousel__indicators li
 */
.slds-carousel__indicator {
  display: inline-flex;
  margin: 0 $spacing-xx-small;
}

/**
 * @summary Actionable element inside of each tab-list indicator
 * @selector .slds-carousel__indicator-action
 * @restrict .slds-carousel__indicator a
 */
.slds-carousel__indicator-action {
  width: $carousel-indicator-width;
  height: $carousel-indicator-width;
  background: var(--slds-g-color-neutral-base-100, #{$carousel-indicator-color-background});
  border: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border});
  border-radius: 50%;

  /**
   * @summary Active state notifying the tab that its current panel is active
   * @selector .slds-is-active
   * @restrict .slds-carousel__indicator-action
   */
  &.slds-is-active,
  &.slds-is-active:hover {
    background: var(--slds-g-color-brand-base-50, #{$carousel-indicator-color-background-active});
    border-color: var(--slds-g-color-brand-base-50, #{$carousel-indicator-color-background-active});
  }

  &:hover {
    background-color: var(--slds-g-color-neutral-base-95, #{$carousel-indicator-color-background-hover});
  }

  &:focus,
  &:focus-visible {
    outline: 0;
  }

  &:focus {
    box-shadow: var(--slds-g-shadow-outset-focus-1);
    border-radius: $border-radius-circle;
  }
}

/**
 * @summary Element that contains the auto-play button icon to toggle on/off
 * @selector .slds-carousel__autoplay
 * @restrict .slds-carousel__stage span
 */
.slds-carousel__autoplay {
  position: absolute;
  left: 0;
  bottom: $spacing-xx-small;
  margin-left: $spacing-xx-small;

  .slds-button:focus {
    box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
    outline: 0;
  }
}