@use "system/breakpoints";
@use "system/typography";
@use "system/spacing";

.ods-carousel {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  position: relative;

  &__content {
    grid-column: span 12 / span 12;
    position: relative;
    overflow: hidden;
  }

  &__track {
    display: flex;
    flex-flow: row nowrap;
  }

  &__slides {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;

    img {
      object-fit: cover;
      width: 100%;
    }

    figure {
      line-height: 0;
    }
  }

  &__slide {
    flex-grow: 1;
    flex-shrink: 0;
  }

  &__navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    top: 0;

    > * {
      @extend %ods-margin-horizontal-8-breakpoint-medium;
      @extend %ods-padding-4-breakpoint-large;

      & .ods-icon {
        @extend %ods-text--size-delta-breakpoint-large;
        @extend %ods-text--weight-medium-breakpoint-large;
      }
    }
  }

  &__info {
    @extend %ods-text--size-lima, %ods-text--size-kilo-breakpoint-medium;
    @extend %ods-text--weight-light;
    @extend %ods-padding-top-1, %ods-padding-top-2-breakpoint-large, %ods-padding-horizontal-4, %ods-padding-horizontal-0-breakpoint-large;

    grid-column: span 12 / span 12;
    white-space: pre-line;

    &__description {
      @extend %ods-margin-right-1;
    }
  }
}