@use 'sass:map';
@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/font-settings' as font-settings;
@use '../../scss/font-mixins' as fonts;
@use '../../scss/screen-reader' as *;
@use '../../scss/breakpoints' as breakpoints;
@import '../../scss/supernova/styles/colors.css';

$status-dot-size: 1rem;

.statusdot {
  min-height: 1.75rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: spacers.getSpacer(2xs);

  &__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: $status-dot-size;
    height: $status-dot-size;
    min-width: $status-dot-size;
    min-height: $status-dot-size;

    &--success,
    &--active,
    &--ready {
      fill: var(--component-statusdot-graphics-kiwi-onlight);
    }

    &--success#{&}--on-dark,
    &--active#{&}--on-dark,
    &--ready#{&}--on-dark {
      fill: var(--component-statusdot-graphics-kiwi-ondark);
    }

    &--inprocess,
    &--exception,
    &--unknown,
    &--inspected,
    &--pending {
      fill: var(--component-statusdot-graphics-banana-onlight);
    }

    &--inprocess#{&}--on-dark,
    &--exception#{&}--on-dark,
    &--unknown#{&}--on-dark,
    &--inspected#{&}--on-dark,
    &--pending#{&}--on-dark {
      fill: var(--component-statusdot-graphics-banana-ondark);
    }

    &--cancelled,
    &--alert,
    &--inactive {
      fill: var(--component-statusdot-graphics-cherry-onlight);
    }

    &--cancelled#{&}--on-dark,
    &--alert#{&}--on-dark,
    &--inactive#{&}--on-dark {
      fill: var(--component-statusdot-graphics-cherry-ondark);
    }

    &--info {
      fill: var(--component-statusdot-graphics-blueberry-onlight);
    }

    &--info#{&}--on-dark {
      fill: var(--component-statusdot-graphics-blueberry-ondark);
    }

    &--transparent {
      fill: var(--color-disabled-border);
    }

    &--transparent#{&}--on-dark,
    &--group#{&}--on-dark,
    &--recurring#{&}--on-dark,
    &--noaccess#{&}--on-dark,
    &--draft#{&}--on-dark,
    &--hidden#{&}--on-dark,
    &--login#{&}--on-dark,
    &--attachment#{&}--on-dark {
      fill: var(--color-base-graphics-ondark);
    }

    svg {
      position: absolute;
    }
  }

  &__label {
    color: var(--color-base-text-onlight-subdued);

    @include fonts.sublabel-subdued;

    &--on-dark {
      color: var(--color-base-text-ondark);
    }
  }
}