// Lightning Design System 2.8.0
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

@import 'deprecate';

/**
 * @summary Creates a button that looks like a plain icon
 *
 * @name base
 * @selector .slds-button_icon
 * @restrict button
 * @support dev-ready
 * @variant
 */
.slds-button_icon,
.slds-button--icon,
.slds-button_icon-inverse,
.slds-button--icon-inverse,
.slds-button_icon-container,
.slds-button--icon-container,
.slds-button_icon-border,
.slds-button--icon-border,
.slds-button_icon-border-filled,
.slds-button--icon-border-filled,
.slds-button_icon-border-inverse,
.slds-button--icon-border-inverse,
.slds-button_icon-more,
.slds-button--icon-more,
.slds-button_icon-error,
.slds-button--icon-error {
  line-height: $line-height-reset;
  vertical-align: middle;
  color: $color-text-icon-default;
}

/**
 * @summary Default width + height for button icon with containers
 * @selector .slds-button_icon-container
 * @restrict .slds-button_icon
 */
.slds-button_icon-container,
.slds-button--icon-container,
.slds-button_icon-border,
.slds-button--icon-border,
.slds-button_icon-border-filled,
.slds-button--icon-border-filled,
.slds-button_icon-border-inverse,
.slds-button--icon-border-inverse,
.slds-button_icon-brand,
.slds-button_icon-more,
.slds-button--icon-more,
.slds-button_icon-container-more,
.slds-button--icon-container-more {
  @include square($square-icon-medium-boundary);
}

/**
 * @summary Transparent themed button icon - Button icon has a border with a transparent background
 * @selector .slds-button_icon-border
 * @restrict .slds-button_icon
 */
.slds-button_icon-border-filled,
.slds-button--icon-border-filled,
.slds-button_icon-border,
.slds-button--icon-border {
  @include button-icon;
  border-color: $button-color-border-primary;
}

/**
 * @summary Button icon with border and transparent background, to be used on an inversed background
 * @selector .slds-button_icon-border-inverse
 * @restrict .slds-button_icon
 */
.slds-button_icon-border-inverse,
.slds-button--icon-border-inverse {
  background-color: $color-background-button-inverse;
  border-color: $button-color-border-primary;

  &[disabled],
  &:disabled {
    background-color: $color-background-button-inverse-disabled;
    border-color: $color-border-button-inverse-disabled;
  }
}

/**
 * @summary Branded button icon - Button icon has a filled background with the brand color
 * @selector .slds-button_icon-brand
 * @restrict .slds-button_icon
 */
.slds-button_icon-brand {
  @include button-brand;

  &[disabled],
  &:disabled {
    background: $brand-disabled;
    border-color: $brand-disabled;
    color: $color-text-button-brand-disabled;
  }
}


/**
 * @summary Neutral themed button icon - Button icon has a border with a filled background
 * @selector .slds-button_icon-border-filled
 * @restrict .slds-button_icon
 */
.slds-button_icon-border-filled,
.slds-button--icon-border-filled {
  background-color: $button-color-background-primary;

  &[disabled],
  &:disabled {
    border-color: $button-color-border-primary;
    background-color: $color-background-button-default-disabled;
  }
}

/**
 * @summary Bare button icon with no border or background, to be used on an inversed background
 * @selector .slds-button_icon-inverse
 * @restrict .slds-button_icon
 */
.slds-button_icon-inverse,
.slds-button--icon-inverse,
.slds-button_icon-border-inverse,
.slds-button--icon-border-inverse {
  color: $color-text-link-inverse;

  &:hover,
  &:focus {
    color: $color-text-link-inverse-hover;
  }

  &:focus {
    @include focus-inverse;
  }

  &:active {
    color: $color-text-link-inverse-active;
  }

  &[disabled],
  &:disabled {
    color: $color-text-link-inverse-disabled;
  }
}

/**
 * @summary Error state - Typically used in conjunction with an error toolip
 * @selector .slds-button_icon-error
 * @restrict .slds-button_icon
 */
.slds-button_icon-error,
.slds-button--icon-error {

  &,
  &:hover,
  &:active,
  &:focus {
    color: $color-text-error;
  }
}

/**
 * @summary Apply the current color to the icon contained within
 * @selector .slds-button_icon-current-color
 * @restrict .slds-button_icon
 */
.slds-button_icon-current-color {
  color: currentColor;
}

/**
 * @summary Changes a button icon container to be 24x24px
 * @name small
 * @selector .slds-button_icon-small
 * @restrict .slds-button_icon
 * @group size
 */
.slds-button_icon-small,
.slds-button--icon-small {
  @include square($square-icon-small-boundary);
}

/**
 * @summary Changes a button icon container to be 20x20px
 * @name x-small
 * @selector .slds-button_icon-x-small
 * @restrict .slds-button_icon
 * @group size
 */
.slds-button_icon-x-small,
.slds-button--icon-x-small {
  @include square($square-icon-x-small-boundary);
  line-height: $line-height-reset;

  .slds-button__icon {
    @include square($square-icon-small-content);
  }
}

/**
 * @summary Changes a button icon container to be 16x16px
 * @name xx-small
 * @selector .slds-button_icon-xx-small
 * @restrict .slds-button_icon
 * @group size
 */
.slds-button_icon-xx-small,
.slds-button--icon-xx-small {
  @include square($square-icon-xx-small-boundary);
  line-height: $line-height-reset;

  .slds-button__icon {
    @include square($square-icon-x-small-content);
  }
}

/**
 * @summary Creates a button menu icon container that has borders and a filled background
 * @selector .slds-button_icon-more
 * @restrict .slds-button_icon
 */
.slds-button_icon-more,
.slds-button--icon-more {
  width: auto;
  line-height: $line-height-button;
  padding: 0 $spacing-x-small;
  background-color: $button-color-background-primary;
  border-color: $button-color-border-primary;
  color: $color-text-icon-default;

  &:hover,
  &:focus {

    .slds-button__icon {
      fill: $brand-accessible;
    }
  }

  &:active .slds-button__icon {
    fill: $brand-accessible-active;
  }

  &[disabled],
  &:disabled {
    cursor: default;

    .slds-button__icon {
      fill: $color-text-icon-default-disabled;
    }
  }
}

/**
 * @summary Creates a button menu icon container that has no borders
 * @selector .slds-button_icon-container-more
 * @restrict .slds-button_icon
 */
.slds-button_icon-container-more,
.slds-button--icon-container-more {
  width: auto;
  line-height: $line-height-button;
  padding: 0 $spacing-x-small;
  vertical-align: middle;
}

/**
 * @summary A parent class must be put on anything that contains a .slds-button__icon_hint so that the child reacts when the parent is hovered.
 * @selector .slds-button__icon_hint
 * @restrict .slds-button_icon .slds-button__icon
 */
.slds-button__icon_hint,
.slds-button__icon--hint {
  fill: $color-text-icon-default-hint;
}

/**
 * @summary A parent class must be put on anything that contains a .slds-button__icon_inverse-hint so that the child reacts when the parent is hovered. This is for a dark background.
 * @selector .slds-button__icon_inverse-hint
 * @restrict .slds-button_icon .slds-button__icon
 */
.slds-button__icon_inverse-hint,
.slds-button__icon--inverse-hint {
  fill: $color-text-icon-inverse-hint;
}

// Handles hint on hover behavior of an inverse button icon, both bordered and non-bordered
.slds-hint-parent {

  .slds-button_icon-border-inverse,
  .slds-button--icon-border-inverse {
    border-color: $color-border-icon-inverse-hint;

    &:focus {
      border-color: $color-border-icon-inverse-hint-hover;
    }
  }

  &:hover,
  &:focus {

    .slds-button_icon-border-inverse,
    .slds-button--icon-border-inverse {
      border-color: $color-border-icon-inverse-hint-hover;
    }

    .slds-button__icon_hint,
    .slds-button__icon--hint {
      fill: $color-text-icon-default;
    }

    .slds-button__icon_inverse-hint,
    .slds-button__icon--inverse-hint {
      fill: $color-text-icon-inverse-hint-hover;
    }

    .slds-button:disabled {

      .slds-button__icon_hint,
      .slds-button__icon--hint {
        fill: currentColor;
      }
    }
  }
}