$size-small: var(
  --wds-close-button-standard-filled-size-small,
  var(--wds-space-300, 18px)
);
$size-medium: var(
  --wds-close-button-standard-filled-size-medium,
  var(--wds-space-400, 24px)
);
$size-large: var(
  --wds-close-button-standard-filled-size-large,
  var(--wds-space-500, 30px)
);
$text-primary: var(--wds-color-text-primary, var(--wsr-color-B10, #116dff));
$text-standard-primary-light: var(
  --wds-color-text-standard-primary-light,
  var(--wsr-color-D80, #ffffff)
);
$text-disabled-light: var(
  --wds-color-text-disabled-light,
  var(--wsr-color-D80-70, rgba(255, 255, 255, 0.7))
);
$standard-filled-text: var(
  --wds-close-button-standard-filled-text,
  #{$text-primary}
);

.close-button {
  width: $size-small;
  height: $size-small;
  border-radius: var(--wds-border-radius-full, 1000px);
  padding: 0px;
  box-sizing: border-box;
  text-align: center;
  border: none;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  transition-duration: 100ms;
  transition-timing-function: linear;
  transition-property: background-color, color, border-color;
  border-color: transparent;
  background-color: transparent;
  color: $text-primary;

  @media (hover: hover) {
    &:hover:where(:not(&--disabled)) {
      color: var(
        --wds-color-fill-standard-primary-hover,
        var(--wsr-color-B20, #5999ff)
      );
    }
  }

  &:active:where(:not(&--disabled)) {
    color: var(
      --wds-color-fill-standard-primary-active,
      var(--wsr-color-B10, #116dff)
    );
  }

  &--disabled {
    color: var(
      --wds-color-fill-standard-primary-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  & .button-core__content {
    line-height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &--skin-standard-filled {
    background-color: var(
      --wds-close-button-standard-filled-fill,
      var(--wsr-color-B50, #e7f0ff)
    );
    color: $standard-filled-text;
  }

  @media (hover: hover) {
    &--skin-standard-filled:hover:where(:not(&--disabled)) {
      background-color: var(
        --wds-close-button-standard-fill-hover,
        var(
          --wds-color-fill-standard-secondary-hover,
          var(--wsr-color-B40, #d6e6fe)
        )
      );
      color: var(
        --wds-close-button-standard-filled-text-hover,
        #{$text-primary}
      );
    }
  }

  &--skin-standard-filled:active:where(:not(&--disabled)) {
    background-color: var(
      --wds-close-button-standard-fill-active,
      var(
        --wds-color-fill-standard-primary-active,
        var(--wsr-color-B30, #a8caff)
      )
    );
    color: $standard-filled-text;
  }

  &--skin-standard-filled#{&}--disabled {
    background-color: var(
      --wds-close-button-standard-fill-disabled,
      var(
        --wds-color-fill-standard-secondary-disabled,
        var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
      )
    );
    color: var(
      --wds-close-button-standard-filled-text-disabled,
      #{$text-standard-primary-light}
    );
  }

  &--skin-light {
    color: var(--wds-color-fill-light-primary, var(--wsr-color-D80, #ffffff));
  }

  @media (hover: hover) {
    &--skin-light:hover:where(:not(&--disabled)) {
      color: var(
        --wds-color-fill-light-primary-hover,
        var(--wsr-color-B50, #e7f0ff)
      );
    }
  }

  &--skin-light:active:where(:not(&--disabled)) {
    color: var(
      --wds-color-fill-light-primary-active,
      var(--wsr-color-B40, #d6e6fe)
    );
  }

  &--skin-light#{&}--disabled {
    color: var(
      --wds-color-fill-light-primary-disabled,
      var(--wsr-color-D80-70, rgba(255, 255, 255, 0.7))
    );
  }

  &--skin-dark {
    color: var(--wds-color-fill-dark-primary, var(--wsr-color-D10, #000624));
  }

  @media (hover: hover) {
    &--skin-dark:hover:where(:not(&--disabled)) {
      color: var(
        --wds-color-fill-dark-primary-hover,
        var(--wsr-color-D20, #333853)
      );
    }
  }

  &--skin-dark:active:where(:not(&--disabled)) {
    color: var(
      --wds-color-fill-dark-primary-active,
      var(--wsr-color-D10, #000624)
    );
  }

  &--skin-dark#{&}--disabled {
    color: var(
      --wds-color-fill-dark-primary-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  &--skin-light-filled {
    background-color: var(
      --wds-color-fill-transparent-primary,
      rgba(22, 45, 61, 0.24)
    );
    color: $text-standard-primary-light;
  }

  @media (hover: hover) {
    &--skin-light-filled:hover:where(:not(&--disabled)) {
      background-color: var(
        --wds-color-fill-transparent-primary-hover,
        rgba(22, 45, 61, 0.3)
      );
      color: $text-standard-primary-light;
    }
  }

  &--skin-light-filled:active:where(:not(&--disabled)) {
    background-color: var(
      --wds-color-fill-transparent-primary-active,
      rgba(22, 45, 61, 0.36)
    );
    color: $text-standard-primary-light;
  }

  &--skin-light-filled#{&}--disabled {
    background-color: var(
      --wds-color-fill-transparent-primary-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
    color: $text-disabled-light;
  }

  &--skin-transparent {
    /* stylelint-disable-next-line plugin/use-baseline */
    background-color: var(
      --wds-color-fill-transparent-primary,
      color-mix(in srgb, var(--wsr-color-D20, #333853) 48%, transparent)
    );
    color: $text-standard-primary-light;
  }

  @media (hover: hover) {
    &--skin-transparent:hover:where(:not(&--disabled)) {
      /* stylelint-disable-next-line plugin/use-baseline */
      background-color: var(
        --wds-color-fill-transparent-primary-hover,
        color-mix(in srgb, var(--wsr-color-D20, #333853) 54%, transparent)
      );
      color: $text-standard-primary-light;
    }
  }

  &--skin-transparent:active:where(:not(&--disabled)) {
    background-color: var(
      --wds-color-fill-transparent-primary-active,
      var(--wsr-color-D20-60, rgba(51, 56, 83, 0.6))
    );
    color: $text-standard-primary-light;
  }

  &--skin-transparent#{&}--disabled {
    background-color: var(
      --wds-color-fill-transparent-primary-disabled,
      var(--wsr-color-D10-20, rgba(0, 6, 36, 0.2))
    );
    color: $text-disabled-light;
  }

  &--size-medium {
    width: $size-medium;
    height: $size-medium;
  }

  &--size-large {
    width: $size-large;
    height: $size-large;
  }
}