@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

@include compatMixins.sky-default-overrides('.sky-label') {
  --sky-override-label-align-items: initial;
  --sky-override-label-border-radius-pill: 10rem;
  --sky-override-label-color-background-container-danger: var(
    --sky-background-color-danger
  );
  --sky-override-label-color-background-container-info: var(
    --sky-background-color-info
  );
  --sky-override-label-color-background-container-success: var(
    --sky-background-color-success
  );
  --sky-override-label-color-background-container-warning: var(
    --sky-background-color-warning
  );
  --sky-override-label-display: inline;
  --sky-override-label-icon-modern-display: none;
  --sky-override-label-line-height: 2.2;
  --sky-override-label-margin: 0 3px;
  --sky-override-label-padding: 0.3em 0.6em 0.3em 0.6em;
  --sky-override-label-text-padding-left: var(--sky-padding-half);
}

@include compatMixins.sky-modern-overrides('.sky-label') {
  --sky-override-label-line-height: 1;
  --sky-override-label-margin: 0 3px;

  &.sky-label-danger,
  &.sky-label-warning {
    --sky-override-label-padding-left: var(--modern-size-9);
  }

  &.sky-label-info {
    --sky-override-label-info-exclamation-path-color: var(
      --modern-color-gray-105
    );
  }

  &.sky-label-info,
  &.sky-label-success {
    --sky-override-label-padding-left: var(--modern-size-6);
  }
}

@include compatMixins.sky-modern-overrides('.sky-label', true, true) {
  --sky-override-label-icon-default-display: none;
}

/* Modern theme */
@include mixins.sky-theme-modern {
  .sky-label {
    &.sky-label-warning,
    &.sky-label-success {
      --sky-icon-stack-top-icon-color-override: var(--sky-color-icon-default);
    }
    &.sky-label-danger {
      --sky-icon-stack-top-icon-color-override: var(--sky-color-icon-inverse);
    }

    &.sky-label-info {
      --sky-icon-stack-top-icon-color-override: var(
        --sky-override-label-info-exclamation-path-color,
        var(--sky-color-icon-inverse)
      );
    }
  }

  .sky-label-info .sky-label-icon-theme-modern {
    color: var(--sky-color-icon-info);
  }

  .sky-label-success .sky-label-icon-theme-modern {
    color: var(--sky-color-icon-success);
  }

  .sky-label-warning .sky-label-icon-theme-modern {
    color: var(--sky-color-icon-warning);
  }

  .sky-label-danger .sky-label-icon-theme-modern {
    color: var(--sky-color-icon-danger);
  }
}

.sky-label {
  color: var(--sky-text-color-default);
  display: var(--sky-override-label-display, inline-flex);
  align-items: var(--sky-override-label-align-items, center);
  border-radius: var(
    --sky-override-label-border-radius-pill,
    var(--sky-border-radius-pill)
  );
  line-height: var(--sky-override-label-line-height, unset);
  margin: var(--sky-override-label-margin, unset);
  white-space: nowrap;
  padding: var(
    --sky-override-label-padding,
    var(--sky-space-inset-pillarbox-1_4-top-s)
      var(--sky-space-inset-pillarbox-1_4-right-s)
      var(--sky-space-inset-pillarbox-1_4-bottom-s)
      var(
        --sky-override-label-padding-left,
        var(--sky-space-inset-pillarbox-1_4-left-s)
      )
  );
}

.sky-label-success {
  background-color: var(
    --sky-override-label-color-background-container-success,
    var(--sky-color-background-container-success)
  );
}

.sky-label-info {
  background-color: var(
    --sky-override-label-color-background-container-info,
    var(--sky-color-background-container-info)
  );
}

.sky-label-warning {
  background-color: var(
    --sky-override-label-color-background-container-warning,
    var(--sky-color-background-container-warning)
  );
}

.sky-label-danger {
  background-color: var(
    --sky-override-label-color-background-container-danger,
    var(--sky-color-background-container-danger)
  );
}

.sky-label-text {
  display: inline-block;
  padding-left: var(
    --sky-override-label-text-padding-left,
    var(--sky-space-gap-icon-s)
  );
}

.sky-label-icon-theme-modern {
  display: var(--sky-override-label-icon-modern-display, block);
}

.sky-label-icon-theme-default {
  display: var(--sky-override-label-icon-default-display, inline);
}
