@use "../../../styles/base/utilities";

[data-fs-carousel] {
  // --------------------------------------------------------
  // Design Tokens for Carousel
  // --------------------------------------------------------

  // Track
  --fs-carousel-padding-mobile             : var(--fs-spacing-0) var(--fs-grid-padding);
  --fs-carousel-padding-desktop            : var(--fs-spacing-0) calc((100% - var(--fs-grid-max-width)) / 2) var(--fs-spacing-0);

  // Item
  --fs-carousel-item-margin-right          : var(--fs-spacing-3);

  // Controls
  --fs-carousel-controls-width             : 3.125rem;
  --fs-carousel-controls-height            : var(--fs-carousel-controls-width);
  --fs-carousel-controls-bkg-color         : var(--fs-color-neutral-0);
  --fs-carousel-controls-border-radius     : var(--fs-border-radius-circle);
  --fs-carousel-controls-box-shadow        : var(--fs-shadow-darker);
  --fs-carousel-controls-icon-color        : var(--fs-color-neutral-7);

  --fs-carousel-controls-control-left      : var(--fs-spacing-4);
  --fs-carousel-controls-control-right     : var(--fs-carousel-controls-control-left);
  --fs-carousel-controls-control-max-left  : calc(-1 * var(--fs-spacing-11));
  --fs-carousel-controls-control-max-right : var(--fs-carousel-controls-control-max-left);

  // Bullets
  --fs-carousel-bullets-padding-top        : var(--fs-carousel-controls-control-left);
  --fs-carousel-bullets-padding-left       : var(--fs-grid-padding);
  --fs-carousel-bullets-padding-right      : var(--fs-carousel-bullets-padding-left);
  --fs-carousel-bullets-column-gap-mobile  : var(--fs-spacing-0);
  --fs-carousel-bullets-column-gap-tablet  : var(--fs-spacing-3);

  --fs-carousel-bullet-width-mobile        : 100%;
  --fs-carousel-bullet-width-desktop       : var(--fs-spacing-1);
  --fs-carousel-bullet-height-mobile       : var(--fs-spacing-0);
  --fs-carousel-bullet-height-desktop      : var(--fs-carousel-bullet-width-desktop);
  --fs-carousel-bullet-bkg-color           : var(--fs-color-neutral-3);
  --fs-carousel-bullet-bkg-color-selected  : var(--fs-color-main-4);
  --fs-carousel-bullet-border-radius       : var(--fs-carousel-controls-border-radius);

  // --------------------------------------------------------
  // Structural Styles
  // --------------------------------------------------------

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: inherit;

  &:hover {
    [data-fs-carousel-controls] {
      @include utilities.media(">=tablet") {
        pointer-events: auto;
        opacity: 1;
      }
    }
  }

  &[data-fs-carousel-variant="scroll"] [data-fs-carousel-item] {
    flex-shrink: 0;
  }

  [data-fs-carousel-controls] {
    position: absolute;
    bottom: 50%;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: auto;
    pointer-events: auto;
    opacity: 0;

    @include utilities.media(">notebook") {
      width: calc(100% + 2 * var(--fs-control-tap-size) + 2 * var(--fs-spacing-4));
    }
  }

  [data-fs-carousel-control] {
    cursor: pointer;

    [data-fs-button-wrapper] {
      border-radius: var(--fs-carousel-controls-border-radius);
      box-shadow: var(--fs-carousel-controls-box-shadow);
    }
    &:not(:hover) [data-fs-button-wrapper] { background-color: var(--fs-carousel-controls-bkg-color); }
    &:hover:not(:disabled) [data-fs-button-wrapper] { box-shadow: var(--fs-carousel-controls-box-shadow); }

    [data-fs-icon] {
      color: var(--fs-carousel-controls-icon-color);
    }
  }

  [data-fs-carousel-track] {
    display: flex;
    padding: var(--fs-carousel-padding-mobile);

    &::-webkit-scrollbar {
      display: none;
    }

    @include utilities.media(">notebook") {
      padding: var(--fs-carousel-padding-desktop);
    }
  }

  [data-fs-carousel-item] {
    &:not(:last-of-type) {
      margin-right: var(--fs-carousel-item-margin-right);
    }
  }

  [data-fs-carousel-bullets] {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    column-gap: var(--fs-carousel-bullets-column-gap-mobile);
    width: 100%;
    padding-top: var(--fs-carousel-bullets-padding-top);
    padding-right: var(--fs-carousel-bullets-padding-right);
    padding-left: var(--fs-carousel-bullets-padding-left);

    @include utilities.media(">tablet") {
      column-gap: var(--fs-carousel-bullets-column-gap-tablet);
      align-items: center;
      justify-content: center;
      width: fit-content;
      margin: auto;
    }

    [data-fs-carousel-bullet] {
      align-items: center;
      justify-content: center;
      width: var(--fs-carousel-bullet-width-mobile);

      [data-fs-button-wrapper] {
        height: var(--fs-carousel-bullet-height-mobile);
        padding: 0;
        background-color: var(--fs-carousel-bullet-bkg-color);
        border-color: transparent;
        border-radius: 0;

        @include utilities.media(">tablet") {
          width: var(--fs-carousel-bullet-width-desktop);
          height: var(--fs-carousel-bullet-height-desktop);
          margin: 0;
          border-radius: var(--fs-carousel-bullet-border-radius);
        }
      }

      &[aria-selected="true"] [data-fs-button-wrapper] {
        background-color: var(--fs-carousel-bullet-bkg-color-selected);
      }
    }
  }
}