
//@use 'mixins/button' as *;
@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;

@include b(button) {
  @include  m(default) {
    background-color: getCssVarWebex('button', 'secondary', 'normal');
    color: getCssVarWebex('text', 'primary', 'normal');
    border-color:getCssVarWebex('outline', 'button', 'normal');
    border-width: 1px;
    border-style: solid;
    &:hover {
      background-color: getCssVarWebex('button', 'secondary', 'hover');
      border-color:getCssVarWebex('outline', 'button', 'normal');
      border-width: 1px;
      border-style: solid;
      color: getCssVarWebex('text', 'primary', 'normal');
    }
    &:focus {
      background-color: getCssVarWebex('button', 'secondary', 'focus');
      border-color:getCssVarWebex('outline', 'button', 'normal');
      border-width: 1px;
      border-style: solid;
    }
    &:active {
      background-color: getCssVarWebex('button', 'secondary', 'pressed');
      border-color:getCssVarWebex('outline', 'button', 'normal');
      border-width: 1px;
      border-style: solid;
    }
  }
  @include m(primary) {
    background-color: getCssVarWebex('button', 'primary', 'normal');
    color: getCssVarWebex('text', 'inverted', 'normal');
    border: getCssVarWebex('button', 'border', 'normal');

    &:hover {
      background-color: getCssVarWebex('button', 'primary', 'hover');
      color: getCssVarWebex('text', 'inverted', 'normal');
    }
    &:focus {
      background-color: getCssVarWebex('button', 'primary', 'normal');
      color: getCssVarWebex('text', 'inverted', 'normal');
    }
    &:active {
      background-color: getCssVarWebex('button', 'primary', 'pressed');
      color: getCssVarWebex('text', 'inverted', 'normal');
    }
  }
  @include m(success) {
    background-color: getCssVarWebex('button', 'join', 'normal');
    color: getCssVarWebex('common','text','white');
    border: getCssVarWebex('button', 'border', 'normal');
    &:hover {
      background-color: getCssVarWebex('button', 'join', 'hover');
      color: getCssVarWebex('common','text','white');
    }
    &:focus {
      background-color: getCssVarWebex('button', 'join', 'normal');
      color: getCssVarWebex('common','text','white');
    }
    &:active {
      background-color: getCssVarWebex('button', 'join', 'pressed');
      color: getCssVarWebex('common','text','white');
    }
  }
  @include m(ghost) {
    background-color: getCssVarWebex('button', 'secondary', 'normal');
    color: getCssVarWebex('text', 'primary', 'normal');
    border: getCssVarWebex('button', 'border', 'normal');
    &:hover {
      background-color: getCssVarWebex('button', 'secondary', 'hover');
      border-color:getCssVarWebex('outline', 'button', 'normal');
      color: getCssVarWebex('text', 'primary', 'normal');
    }
    &:focus {
      background-color: getCssVarWebex('button', 'secondary', 'focus');
      border-color:getCssVarWebex('outline', 'button', 'normal');
    }
    &:active {
      background-color: getCssVarWebex('button', 'secondary', 'pressed');
      border-color:getCssVarWebex('outline', 'button', 'normal');
    }
  }
  @include m(info) {
    background-color: getCssVarWebex('button', 'accent', 'normal');
    color: getCssVarWebex('common','text','white');
    border: getCssVarWebex('button', 'border', 'normal');
    &:hover {
      background-color: getCssVarWebex('button', 'accent', 'hover');
      color: getCssVarWebex('common','text','white');
    }
    &:focus {
      background-color: getCssVarWebex('button', 'accent', 'normal');
      color: getCssVarWebex('common','text','white');
    }
    &:active {
      background-color: getCssVarWebex('button', 'accent', 'pressed');
      color: getCssVarWebex('common','text','white');
    }
  }
  @include m(text) {
    color: getCssVarWebex('text','primary','normal');
    &:hover {
      color: getCssVarWebex('text','accent','hover');
    }
    &:focus {
      color: getCssVarWebex('text','accent','hover');
    }
    &:active {
      color: getCssVarWebex('text','accent','active');
    }
  }
  @include m(link) {
    color: getCssVarWebex('text','accent','normal');
    &:hover {
      color: getCssVarWebex('text','accent','hover');
    }
    &:focus {
      color: getCssVarWebex('text','accent','hover');
    }
    &:active {
      color: getCssVarWebex('text','accent','active');
    }
  }
  @include when(disabled) {
    color: getCssVarWebex('text', 'primary', 'disabled');
    background-color: getCssVarWebex('button','primary','disabled');
    &,
    &:hover {
      border: getCssVarWebex('button', 'border', 'normal');
      color: getCssVarWebex('text', 'primary', 'disabled');
      background-color: getCssVarWebex('button','primary','disabled');
    }
  }
}
.el-button.el-button--text.is-disabled:hover {
  background-color: transparent;
}
.loading—animation > div {
  background-color: getCssVarWebex('text', 'inverted', 'normal');
}
