@use 'sass:meta';
@use 'sass:color';
@use '../../base/token';
@use '../../abstract';

.cds-btn-close {
  $size: (
    sm: 36px,
    md: 40px,
    lg: 44px,
  );

  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  border-radius: 8px;
  cursor: pointer;

  &:hover {
    background-color: var(--gray-50);
    color: var(--gray-500);
  }

  &:focus {
    background-color: var(--gray-50);
  }

  // size
  // ==========================================
  @each $size, $value in $size {
    &--#{$size} {
      width: $value;
      height: $value;
    }
  }

  // theme
  // ==========================================
  &--dark {
    color: var(--gray-100);

    &:hover {
      color: var(--base-white);
      background-color: color.change(token.$base-white, $alpha: 0.2);
    }

    &:focus {
      color: var(--gray-100);
      background-color: color.change(token.$base-white, $alpha: 0.2);
    }
  }
}