@use '@funidata/fudis-core' as core;

.fudis-language-badge {
  @include core.bg-color('transparent');
  @include core.border-none;
  @include core.box-reset;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: core.$spacing-lg;
  height: core.$spacing-lg;

  &:focus-within {
    @include core.focus-generic;
  }

  &__content {
    @include core.body-text-sm-regular;
    @include core.bg-color('white');
    @include core.border('1px', 'solid', 'gray-dark');
    @include core.box-reset;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    min-width: core.$spacing-md;
    min-height: core.$spacing-md;
    text-align: center;
    /* stylelint-disable-next-line unit-disallowed-list */
    letter-spacing: calc(0.02rem / var(--fudis-rem-multiplier));
  }

  &__missing {
    @include core.border('1px', dashed, 'gray-dark');
  }

  &--selected,
  &--selected:focus {
    @include core.outline('2px', 'solid', 'primary');
  }
}