$border-color: #333333;
$disabled-border-color: #c8c8c8;
$color: #4a4a4a;
$disabled-color: #c8c8c8;
$background: #fff;
$background-hover: #f7f7f7;
$background-visited: #dcdcdc;
$width: 20px;
$height: 16px;
$vertical-align-top: top;
$margin: 1px 6px 0px 0px;
$default-cursor: default;
$cursor: pointer;
$opacity: 0.5;
$oui-icon-spacing: 2px !default;

.oui-icon-button {
  cursor: $cursor;
  padding: $oui-icon-spacing;
  .oui-icon,
  .oui-button-wrapper {
    display: block;
    margin: 0 auto;
    svg {
      display: block;
    }
  }
  &:hover,
  &[class^='cdk'],
  &.cdk-keyboard-focused,
  &.cdk-program-focused {
    background: rgba(200, 200, 200, 0.4);
    border-radius: $oui-icon-spacing;
    transition: opacity 0.2s cubic-bezier(0.35, 0, 0.25, 1),
      background-color 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  }
}

@mixin oui-icon-text {
  .oui-icon-text-button {
    @include oui-icon-text-button();
  }
}
/*generating themes for oui-icon-text-button(icon buttons)*/
@mixin oui-icon-text-button {
  color: $color !important;
  background: $background !important;
  border: 1px solid $border-color !important;
  img {
    width: $width;
    height: $height;
    vertical-align: $vertical-align-top;
    margin: $margin;
    cursor: $cursor;
  }
  label {
    cursor: $cursor;
  }
  &:hover,
  &.cdk-keyboard-focused {
    background: $background-hover !important;
    text-decoration: underline !important;
  }
  &:active {
    background: $background-visited !important;
    text-decoration: underline !important;
  }
  &.oui-icon-text-button[disabled] {
    border-color: $disabled-border-color !important;
    color: $disabled-color !important;
    cursor: $default-cursor !important;
    img {
      opacity: $opacity !important;
      cursor: $default-cursor !important;
    }
    label {
      cursor: $default-cursor !important;
    }
    &:hover,
    &.cdk-keyboard-focused {
      background: transparent !important;
      text-decoration: none !important;
    }
    &:active {
      background: transparent !important;
      text-decoration: none !important;
    }
  }
}