@use "sass:list";
@use 'sass:map';
@use '../utilities/functions' as *;
@use '../utilities/mixins' as *;

$icon-button-size: (
  lg: (
    fixed(40),
    fixed(8)
  ),
  md: (
    fixed(32),
    fixed(8)
  )
);

$size-lg: list.nth(map.get($icon-button-size, lg), 1);
$gap-lg: list.nth(map.get($icon-button-size, lg), 2);
$size-md: list.nth(map.get($icon-button-size, md), 1);
$gap-md: list.nth(map.get($icon-button-size, md), 2);

.icon-button {
  position: relative;
  overflow: hidden;
  display: flex;
  align-content: center;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: radius(md);
  place-self: start;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  z-index: 0;
  background-color: bg(surface, neutral);

  i::before {
    color: icon(neutral);
  }

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: opacity(hidden);
    transition: opacity 0.2s;
    z-index: -1;
  }

  &-- {
    &lg {
      max-width: $size-lg !important;
      max-height: $size-lg !important;
      padding: $gap-lg !important;
      > i {
        font-size: 1.5rem;
      }
    }

    &md {
      max-width: $size-md !important;
      max-height: $size-md !important;
      padding: $gap-md !important;
      > i {
        font-size: 1rem;
      }
    }
  }

  &:active:not(:disabled)::before, &:focus {
    border-radius: radius(lg);
  }

  @include states();
}