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

.ods-table-wrapper {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.ods-table {
  display: inline-table;
  overflow-x: auto;
  table-layout: auto;
  width: max-content;
  text-align: left;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid colors.$grayscale-10;

  &__caption {
    @extend %ods-text--size-india, %ods-text--size-hotel-breakpoint-medium, %ods-text--size-golf-breakpoint-large;
    @include typography.weight("medium");

    text-align: left;
    margin-bottom: 0.5rem;
    max-width: 50rem;
  }

  &__title {
    @extend %ods-text--size-india, %ods-text--size-hotel-breakpoint-medium, %ods-text--size-golf-breakpoint-large;
    @include typography.weight("medium");

  }

  &__description {
    @extend %ods-text--size-kilo, %ods-text--size-kilo-breakpoint-medium, %ods-text--size-juliett-breakpoint-large;
    @include typography.weight("light");

    margin-top: 0.25rem;
  }

  &__heading,
  &__cell {
    @extend %ods-padding-4;

    overflow-wrap: break-word;
    word-wrap: break-word;
    text-align: start;
    vertical-align: top;
    max-width: 24rem;

    &:not(:last-child) {
      border-right: 1px solid colors.$grayscale-10;
    }
  }

  &__head {
    .ods-table__heading {
      vertical-align: top;
      @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
      @extend %ods-text--weight-medium;
    }
  }

  &__body {
    .ods-table__row:nth-child(odd) {
      @extend %ods-color-bg-beige;
    }
  }


  &__heading:first-child,
  &__cell:first-child {
    @extend %ods-padding-left-8-breakpoint-medium;
  }

  &__heading:last-child,
  &__cell:last-child {
    @extend %ods-padding-right-8-breakpoint-medium;
  }

  &--left-right {
    .ods-table__heading:last-child,
    .ods-table__cell:last-child {
      text-align: right;
    }
  }

  &--full-width {
    width: 100%;
  }
}