@use '../../../../mx-core/src/base/shape';
@use '../../../../mx-core/src/base/typography';

.mx-usage-bar {
  &__header {
    @extend .gl-title-sm;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
  }

  &__progress {
    @extend .rounded-x-sm;
    width: 100%;
    height: 20px;
    overflow: hidden;
    display: flex;
    margin-bottom: 4px;
  }

  &__segment {
    height: 100%;

    &:not(:last-child) {
      border-right-style: solid;
      border-right-width: 1px;
    }
  }

  &__labels {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 4px;
  }

  &__label-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4px;
  }

  &__used-label {
    @extend .gl-label-sm;
    display: flex;
    align-items: center;
  }

  &__color-indicator {
    @extend .rounded-x-sm;
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-top: 2px;
    margin-bottom: 4px;
  }

  &__usage-text {
    @extend .gl-body-sm;
  }
}