@use 'sass:map';
@use '../utils/constants.scss';
@use '../utils/mixins.scss';
@use '../utils/tokens.scss';
@use '../utils/stateLayerVars.scss' as state-layer;

@import '@viasat/beam-tokens/components/CloseButton';

$closeButtonBaseClass: '#{constants.$prefix}close-button';

$sizes: (
  xs: tokens.$bm-comp-close-btn-size-xs,
  sm: tokens.$bm-comp-close-btn-size-sm,
  md: tokens.$bm-comp-close-btn-size-md,
  lg: tokens.$bm-comp-close-btn-size-lg,
  xl: tokens.$bm-comp-close-btn-size-xl,
);

.#{$closeButtonBaseClass} {
  display: inline-flex;
  padding: tokens.$bm-comp-close-btn-space-y tokens.$bm-comp-close-btn-space-x;
  justify-content: center;
  align-items: center;
  position: relative;
  outline: none;
  cursor: pointer;
  border: unset;
  border-radius: tokens.$bm-comp-close-btn-radius;
  background-color: unset;
  color: tokens.$bm-comp-close-btn-color-default;

  .#{state-layer.$stateLayerBaseClass} {
    #{state-layer.$outline-offset}: calc(0px - tokens.$bm-sem-size-focus-offset);
  }

  @each $size, $sizeValue in $sizes {
    &--#{$size} {
      height: calc($sizeValue + tokens.$bm-comp-close-btn-space-y * 2);
      width: calc($sizeValue + tokens.$bm-comp-close-btn-space-x * 2);
    }

    &--#{$size} &__icon {
      height: $sizeValue;
      width: $sizeValue;
    }
  }

  &:disabled {
    cursor: not-allowed;
    opacity: tokens.$bm-sem-opacity-disabled;
  }
}