@use 'sass:map';
@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/font-settings' as font-settings;
@use '../../scss/screen-reader' as *;
@use '../../scss/breakpoints' as breakpoints;

$dot-size: 1.765rem;

.sharing-status {
  display: inline-flex;
  align-items: center;
  font-size: font-settings.$font-size-sm;
  line-height: 1.25rem;
  font-weight: 600;
  gap: spacers.getSpacer(2xs);

  &__dot {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 10rem;
    width: $dot-size;
    height: $dot-size;
    min-width: $dot-size;
    min-height: $dot-size;

    &--kiwi {
      background: palette.$kiwi900;
    }

    &--cherry {
      background: palette.$cherry500;
    }

    &--neutral {
      background: palette.$neutral700;
    }
  }

  &__label {
    white-space: nowrap;

    &--wrap {
      white-space: normal;
    }

    &--kiwi {
      color: palette.$kiwi900;
    }

    &--cherry {
      color: palette.$cherry500;
    }

    &--neutral {
      color: palette.$neutral700;
    }
  }
}