@use "../../styles/buttons";
@use "../../styles/utils";
@use "./variables" as locals;

@include utils.layer {
  @include buttons.base;

  .Block {
    @extend %sizeDefaults;

    border-radius: var(--cmm-radius-lg);
    width: locals.$size;
    height: locals.$size;
    padding: 0;

    > svg {
      width: locals.$iconSize;
      height: locals.$iconSize;
    }
  }

  // Sizes

  %sizeDefaults {
    #{locals.$size_name}: 2.5rem;
    #{locals.$iconSize_name}: 1.75em;
  }

  .--sm {
    #{locals.$size_name}: 2rem;
    #{locals.$iconSize_name}: 1.25em;
  }

  .--md {
    @extend %sizeDefaults;
  }

  .--lg {
    #{locals.$size_name}: 3.5rem;
    #{locals.$iconSize_name}: 2.25em;
  }
}
