deleted!

&,
  &[size] {
    &,
    &[corners] {
      .content {
        > .leadingIcon:only-child,
        > .trailingIcon:only-child {
          padding: 0;
        }
      }
    }
  }

@use '../../styling/component-includes';
@import './button.component.theming.scss';
@include host-coverable;

:host {
  pointer-events: none;
}

.button {
  @include button-reset;
  @include focus($buttonFocusColor, $buttonBorderRadiusLeft, $buttonBorderRadiusRight);

  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  height: use-var($buttonHeight);
  min-width: use-var($buttonHeight);
  padding: 0;
  color: use-var($buttonColor);

  pointer-events: auto;
  z-index: 0;
  perspective: 800px;

  &[layout='cover'] {
    display: grid;
  }

  &[data-disabled] {
    @extend .disabled;
  }

  &[data-busy] {
    cursor: auto;
    pointer-events: none;

    .content {
      visibility: hidden;
    }

    .loaderContainer {
      visibility: unset;
    }
  }

  &:hover,
  &:focus {
    &:not(:disabled) {
      @include set-var($buttonBackgroundColor, use-var($buttonBackgroundColorHover));
      @include set-var($buttonBorderColor, use-var($buttonBorderColorHover));
    }
  }

  &:active {
    &:not(:disabled) {
      .background-elm {
        transform: translateZ(-0.75rem);
      }
    }
  }

  &:disabled {
    .background-elm {
      pointer-events: none;
    }
  }

  & > .background-elm {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-top-left-radius: use-var($buttonBorderRadiusLeft);
    border-bottom-left-radius: use-var($buttonBorderRadiusLeft);
    border-top-right-radius: use-var($buttonBorderRadiusRight);
    border-bottom-right-radius: use-var($buttonBorderRadiusRight);
    box-shadow: 0 0 0 border-width(small) use-var($buttonBorderColor) inset;
    background-color: use-var($buttonBackgroundColor);
    transition: transform 0.12s $easing-1;
    transform: scale(1);
    z-index: -1;

    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: border-width(small);
      border-top-left-radius: use-var($buttonBorderRadiusLeft);
      border-bottom-left-radius: use-var($buttonBorderRadiusLeft);
      border-top-right-radius: use-var($buttonBorderRadiusRight);
      border-bottom-right-radius: use-var($buttonBorderRadiusRight);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      -webkit-mask-composite: xor;
      background: linear-gradient(to bottom, use-var($buttonBorderColor), use-var($buttonBorderColorBottom));
    }
  }

  & > .content {
    grid-column: 1;
    grid-row: 1;
    pointer-events: none;

    .supportingLabel {
      color: use-var($buttonColorSupporting);
    }

    whn-icon {
      color: use-var($buttonIconColor);
    }
  }

  // SIZE
  & > .content {
    @include inline-grid-with-gap(spacer(x-small));
    @include typography(350);

    & > :first-child {
      margin-left: spacer(large);
    }

    & > whn-icon:first-child {
      margin-left: spacer(medium);
    }

    & > :last-child {
      margin-right: spacer(large);
    }

    & > whn-icon:last-child {
      margin-right: spacer(medium);
    }

    & > whn-chip:last-child {
      margin-right: spacer(small);
    }

    & > whn-icon:only-child {
      margin-right: spacer(xx-small);
      margin-left: spacer(xx-small);
    }

    .text {
      @include inline-grid-with-gap(spacer(x-small));
    }

    .supportingLabel {
      @include typography(300);
    }
  }

  @include select-size('small') {
    & > .content {
      @include typography(250);

      & > :first-child {
        margin-left: spacer(medium);
      }

      & > whn-icon:first-child {
        margin-left: spacer(small);
      }
  
      & > :last-child {
        margin-right: spacer(medium);
      }

      & > whn-icon:last-child {
        margin-right: spacer(small);
      }

      & > whn-chip:last-child {
        margin-right: spacer(x-small);
      }

      & > whn-icon:only-child {
        margin-right: spacer(xx-small);
        margin-left: spacer(xx-small);
      }

      .supportingLabel {
        @include typography(200);
      }
    }
  }

  @include select-size('large') {
    & > .content {
      & > :first-child {
        margin-left: spacer(x-large);
      }

      & > whn-icon:first-child {
        margin-left: spacer(large);
      }
  
      & > :last-child {
        margin-right: spacer(x-large);
      }

      & > whn-icon:last-child {
        margin-right: spacer(large);
      }

      & > whn-chip:last-child {
        margin-right: spacer(medium);
      }

      & > whn-icon:only-child {
        margin-right: spacer(x-small);
        margin-left: spacer(x-small);
      }
    }
  }

  // EMPHASIS
  @include select-emphisis('primary') {
    & > .background-elm {
      box-shadow: none;
    }
  }

  @include select-emphisis('secondary') {
    & > .background-elm {
      box-shadow: none;

      &:after {
        display: none;
      }
    }
  }

  @include select-emphisis('tertiary') {
    & > .background-elm {
      &:after {
        display: none;
      }
    }
  }

  .loaderContainer {
    @include inline-grid-with-gap(0);
    grid-column: 1;
    grid-row: 1;
    visibility: hidden;
    pointer-events: none;
  }
}