@use "sass:map";

$draco-button-sizes: ( "small", "medium", "large" );

$draco-button-size-props: (
  "small": (
    "gap": 8px,
    "min-height": 28px,
    "padding-vertical": 3px,
    "padding-horizontal": 10px,
    "font-size": 12px,
    "line-height": 1.5,
  ),
  "medium": (
    "gap": 10px,
    "min-height": 32px,
    "padding-vertical": 4px,
    "padding-horizontal": 12px,
    "font-size": 14px,
    "line-height": 1.5,
  ),
  "large": (
    "gap": 14px,
    "min-height": 48px,
    "padding-vertical": 9px,
    "padding-horizontal": 17px,
    "font-size": 16px,
    "line-height": 1.5,
  ),
);

.draco-button {
  @each $size in $draco-button-sizes {
    &.draco-button--size-#{$size} {
      gap: map.get($draco-button-size-props, $size, "gap");
      min-height: map.get($draco-button-size-props, $size, "min-height");
      padding: map.get($draco-button-size-props, $size, "padding-vertical") map.get($draco-button-size-props, $size, "padding-horizontal");
      font-size: map.get($draco-button-size-props, $size, "font-size");
      line-height: map.get($draco-button-size-props, $size, "line-height");


      &.draco-button--icon-only {
        min-width: map.get($draco-button-size-props, $size, "min-height");
        min-height: map.get($draco-button-size-props, $size, "min-height");
        padding: 0;
      }
    }
  }

  &.draco-button--width-full {
    width: 100%;
    max-width: 100%;

    .draco-button__text {
      flex: 0 0 auto;
    }
  }
}