@import 'element:ef-icon';
@import 'element:ef-tooltip';
@import '../shared-styles/button';
@import '../responsive';

:host {
  cursor: pointer;

  [part='icon'] {
    flex: none;
  }
  &:not([empty]) [part='label'] {
    white-space: inherit;
    overflow: inherit;
    text-overflow: inherit;
    min-width: 0;
    flex: 1 1 auto;
  }

  &[hover-icon] {
    #hover-icon {
      display: none;
    }

    &:hover {
      .desktop-specific({
        #icon {
          display: none;
        }
        #hover-icon {
          display: block;
        }
      });
    }
  }

  .button-defaults;
  .touch-action();
  // Make the button square when there is no text
  &[empty][icon] {
    min-width: @button-height;
    padding: 0;
  }

  // Allow for a transparent icon button
  &:not([cta])[empty][icon][transparent] {
    .set(@color) {
      color: @color;
      background: none !important;
      box-shadow: none !important;
      border: none !important;
      .states(transparent, @color);
    }

    // We have to do this as @button-background-color
    // is modified during the `states` injection.
    .set(@button-background-color);

    &:not(:focus) {
      border-color: transparent !important;
    }

    &[toggles][active] {
      color: @button-toggle-active-background-color;
      .states(transparent, @button-toggle-active-background-color);
    }

    &[focused='visible'] {
      outline: @input-border-width @input-border-style @input-focused-border-color;
    }
  }

  // Shift the icon to the right
  &:not([empty])[icon][textpos='before'] [part='icon'] {
    order: 1;
  }

  // Add padding to space the icon
  &:not([empty])[icon][textpos='after'] [part='label'] {
    padding-left: 0.3em;
  }
  &:not([empty])[icon][textpos='before'] [part='label'] {
    padding-right: 0.3em;
  }
}