@use 'sass:map';
@use '../../scss/breakpoints' as breakpoints;
@import '../../scss/supernova/styles/colors.css';

$desktop-size: 3rem;
$mobile-inner-size: 2.375rem;
$mobile-outer-size: 2.75rem;

.close {
  display: flex;
  align-items: center;
  justify-content: center;
  height: $mobile-outer-size;
  width: $mobile-outer-size;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;

  &:focus-visible {
    outline: none;
  }

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    height: $desktop-size;
    width: $desktop-size;
  }

  &--small {
    height: $mobile-outer-size;
    width: $mobile-outer-size;
  }

  &__inner-container {
    width: $mobile-inner-size;
    height: $mobile-inner-size;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      height: $desktop-size;
      width: $desktop-size;
    }

    &--small {
      width: $mobile-inner-size;
      height: $mobile-inner-size;
    }

    :hover > & {
      background-color: var(--color-action-background-transparent-onlight-hover);
    }

    :active > & {
      background-color: var(--color-action-background-transparent-onlight-active);
    }

    :focus-visible > & {
      outline: 3px solid var(--color-action-border-onlight-focus);
      border-radius: 0;
      border: 0;
    }

    &--plum {
      :hover > & {
        background-color: var(--color-help-background-transparent-onlight-hover, #6c36b31a);
      }

      :active > & {
        background-color: var(--color-help-background-transparent-onlight-active, #6c36b31a);
      }

      :focus-visible > & {
        outline: 3px solid var(--color-action-border-onlight-focus);
        border-radius: 0;
        border: 0;
      }
    }
  }
}