@use '../../abstract';
@use '../../base/token';

.cds-content-scrolling {
  width: 100%;

  &__content {
    width: 100%;
    height: 370px;
    overflow-y: auto;
  }

  &__items-list-wrap {
    &:where(:not(:last-child)) {
      margin-bottom: 32px;
    }
  }

  &__items-header-wrap {
    display: flex;
    justify-content: space-between;
  }

  &__items-header {
    display: flex;
    padding: 16px;
    color: var(--secondary-gray-blue-450);
    font-size: token.$font-size-1;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
  }

  &__tooltip-icon {
    display: none;
  }

  &__item-wrap {
    display: flex;
    justify-content: space-between;

    &:where(:nth-child(even)) {
      background: var(--gray-50);
    }
  }

  &__item {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 16px;
    font-size: token.$font-size-1;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);

    &:where(.left) {
      gap: 4px;
    }

    &:where(.right) {
      gap: 12px;
      font-weight: unset;
      color: var(--gray-500);
    }
  }

  @include abstract.media-bp-up('md') {
    width: 640px;

    &__content {
      height: calc(390px + 72px);
      padding-top: 72px;
      margin-top: -72px;
    }

    &__items-list-wrap {
      &:where(:not(:last-child)) {
        margin-bottom: 40px;
      }
    }

    &__items-header {
      flex: 1;
      align-items: center;
      gap: 4px;
      padding: 16px 24px;
    }

    &__tooltip-icon {
      display: block;
    }

    &__item {
      flex: 1;
      height: 64px;
      padding: 0 24px;
    }
  }
}