@import '../../variables';

%ui-button {
  @extend %ui-component;

  @include ui-icon-container;

  background-color: transparent;
  border: 0;
  box-sizing: content-box;
  cursor: pointer;
  height: $icon-size;
  font-size: $font-size; // Explicitly needed on iOS to ensure icon fonts are sized correctly
  min-width: $icon-size;
  padding: calc($icon-size * 0.25);
  transition: transform 0.15s ease;
  // sass-lint:disable no-vendor-prefixes
  -webkit-tap-highlight-color: transparent;

  .#{$prefix}-label {
    color: $color-primary;
  }

  &.#{$prefix}-disabled {
    cursor: default;

    &,
    > * {
      pointer-events: none;
    }

    .#{$prefix}-label {
      &:hover {
        text-decoration: none;
      }
    }
  }

  &.touched {
    transform: scale(0.8);
  }

  @include hidden;
  @include focusable;
}

.#{$prefix}-ui-button {
  @extend %ui-button;
}