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

@mixin modifier($variant, $scheme) {
  $selector: ".Block--#{$variant}.Block--#{$scheme}";

  #{$selector} {
    background: var(--cmm-color-#{$scheme}-#{$variant}-bg);
    color: var(--cmm-color-#{$scheme}-#{$variant}-font);
    border-color: var(--cmm-color-#{$scheme}-#{$variant}-border);
  }

  // FIXME: Support image
  :is(a, button)#{$selector}:hover {
    background: var(--cmm-color-#{$scheme}-#{$variant}-bg-hover);
  }
}

@include utils.layer {
  .Block {
    @extend %sizeDefaults;
    @include utils.size(locals.$size);

    display: inline-block;
    border-radius: var(--cmm-radius-full);
    overflow: hidden;
    transition: var(--cmm-transition-bg);
    margin: locals.$margin;
    font-weight: var(--cmm-font-weight-medium);
    box-shadow: 0 0 0 locals.$ringSize var(--cmm-color-surface-0);

    * {
      width: 100%;
      height: 100%;
      display: grid;
      place-content: center;
    }

    img {
      object-fit: cover;
      object-position: center;
    }

    svg {
      width: 1.8em;
      height: 1.8em;
    }
  }

  // Modifiers
  @each $variant in variables.$variants {
    @each $scheme in variables.$colorSchemes {
      @include modifier($variant, $scheme);
    }
  }

  .Block--outline {
    border-width: 1px;
    border-style: solid;
  }

  // Sizes

  %sizeDefaults {
    #{locals.$size_name}: 3rem;
    font-size: var(--cmm-font-size-md);
  }

  .--sm {
    #{locals.$size_name}: 2rem;
    font-size: var(--cmm-font-size-xs);
  }

  .--md {
    @extend %sizeDefaults;
  }

  .--lg {
    #{locals.$size_name}: 4rem;
    font-size: var(--cmm-font-size-xl);
  }
}
