// Lightning Design System 2.24.3
// 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';
@import '../mixins/index';

/**
 * @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,
.slds-button_icon-warning,
.slds-button--icon-warning {
  line-height: $line-height-reset;
  vertical-align: middle;
  justify-content: center;
  color: var(--slds-g-color-neutral-base-50, #{$color-text-icon-default});
  flex-shrink: 0;
}

/**
 * @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: var(--slds-g-color-border-base-4, #{$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: transparent;
  border-color: $button-color-border-primary;

  &[disabled],
  &:disabled {
    background-color: transparent;
    border-color: var(--slds-g-color-neutral-100-opacity-25, #{$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-icon-brand;

  &[disabled],
  &:disabled {
    background: var(--slds-g-color-neutral-base-80, #{$brand-disabled});
    border-color: var(--slds-g-color-neutral-base-80, #{$brand-disabled});
    color: var(--slds-g-color-neutral-base-100, #{$color-text-button-brand-disabled});
  }

  &:focus {
    box-shadow: var(--_slds-g-shadow-outset-focus);
    outline: 0;
  }
}


/**
 * @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: var(--slds-g-color-neutral-base-100, #{$button-color-background-primary});

  &[disabled],
  &:disabled {
    border-color: var(--slds-g-color-border-base-1, #{$button-color-border-primary});
    background-color: var(--slds-g-color-neutral-base-100, #{$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: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse});

  &:hover,
  &:focus {
    color: var(--slds-g-color-neutral-100-opacity-75, #{$color-text-link-inverse-hover});
  }

  &:focus {
    @include focus-inverse;
  }

  &:focus {
    box-shadow: var(--_slds-g-shadow-inset-focus, #{$shadow-button-focus});
    border-color: transparent;
    outline: 0;
  }

  &:active {
    color: var(--slds-g-color-neutral-100-opacity-50, #{$color-text-link-inverse-active});
  }

  &[disabled],
  &:disabled {
    color: var(--slds-g-color-neutral-100-opacity-25, #{$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: var(--slds-g-color-error-base-40, #{$color-text-error});
  }
}

/**
 * @summary Warning state - Typically used in conjunction with an warning tooltip
 * @selector .slds-button_icon-warning
 * @restrict .slds-button_icon
 */
.slds-button_icon-warning,
.slds-button--icon-warning {

  &,
  &:hover,
  &:active,
  &:focus {
    color: var(--slds-g-color-warning-base-50, #{$color-text-warning});
  }
}

/**
 * @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 48x48px
 * @name large
 * @selector .slds-button_icon-large
 * @restrict .slds-button_icon
 * @group size
 */
.slds-button_icon-large,
.slds-button--icon-large {
  @include square($square-icon-large-boundary);

  .slds-button__icon {
    @include square($square-icon-utility-large);
  }
}

/**
 * @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: var(--slds-g-color-neutral-base-100, #{$button-color-background-primary});
  border-color: var(--slds-g-color-border-base-4, #{$button-color-border-primary});
  color: var(--slds-g-color-neutral-base-50, #{$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: var(--slds-g-color-neutral-base-80, #{$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: var(--slds-g-color-neutral-base-50, #{$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: var(--slds-g-color-neutral-100-opacity-50, #{$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: var(--slds-g-color-neutral-100-opacity-50, #{$color-border-icon-inverse-hint});

    &:focus {
      border-color: var(--slds-g-color-neutral-100-opacity-75, #{$color-border-icon-inverse-hint-hover});
    }
  }

  &:hover,
  &:focus {

    .slds-button_icon-border-inverse,
    .slds-button--icon-border-inverse {
      border-color: var(--slds-g-color-neutral-100-opacity-75, #{$color-border-icon-inverse-hint-hover});
    }

    .slds-button__icon_hint,
    .slds-button__icon--hint {
      fill: var(--slds-g-color-neutral-base-40, #{$color-text-icon-default});
    }

    .slds-button__icon_inverse-hint,
    .slds-button__icon--inverse-hint {
      fill: var(--slds-g-color-neutral-100-opacity-75, #{$color-text-icon-inverse-hint-hover});
    }

    .slds-button:disabled {

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