@import '../../../style/core/utilities.scss';

.dnb-flex-item {
  &--grow {
    flex-grow: 1;
  }

  &--shrink {
    flex-shrink: 1;
  }

  &--align-self {
    &-flex-start {
      align-self: flex-start;
    }

    &-flex-end {
      align-self: flex-end;
    }

    &-center {
      align-self: center;
    }

    &-baseline {
      align-self: baseline;
    }

    &-stretch {
      align-self: stretch;
    }
  }

  // Handle column sizes
  &--responsive {
    --sizeCount--default: 12;
    --size--default: var(--small);

    .dnb-flex-container[data-media-key='small'] & {
      --size: var(--small, var(--medium));
    }
    .dnb-flex-container[data-media-key='medium'] & {
      --size: var(--medium, var(--large));
    }
    .dnb-flex-container[data-media-key='large'] & {
      --size: var(--large, var(--medium));
    }

    --flex-basis: calc(
      100% / var(--sizeCount, var(--sizeCount--default)) *
        var(--size, var(--size--default))
    );

    flex-grow: 0;
    flex-basis: var(--flex-basis);
    max-width: var(--flex-basis);
  }
}