@class-prefix-button: ~'amh-button';

.@{class-prefix-button} {
  --color: var(--amh-color-white);

  --text-color: var(--amh-button-text-color, var(--amh-color-text));
  --background-color: var(
    --amh-button-background-color,
    var(--amh-color-background)
  );
  --border-radius: var(--amh-button-border-radius, 26px);
  --border-width: var(--amh-button-border-width, 1px);
  --border-style: var(--amh-button-border-style, solid);
  --border-color: var(--amh-button-border-color, var(--amh-color-border));
  --font-size:var(--amh-font-size,var(--amh-font-size-36));

  color: var(--text-color);
  background-color: var(--background-color);
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: auto;
  padding: 7px 12px;
  margin: 0;
  font-size: var(--font-size);
  line-height: 1.4;
  text-align: center;
  border: var(--border-width) var(--border-style) var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: opacity ease 0.15s;
  user-select: none;
  
  &:focus {
    outline: none;
  }
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(
      calc(var(--border-width) * -1),
      calc(var(--border-width) * -1)
    );
    width: 100%;
    height: 100%;
    background-color: #000;
    border: var(--border-width) var(--border-style) #000;
    border-radius: var(--border-radius);
    opacity: 0;
    content: ' ';
    box-sizing: content-box;
  }
  &:active::before {
    opacity: 0.08;
  }

  &-default {
    &.@{class-prefix-button}-fill-outline {
      --background-color: transparent;
      --border-color: var(--amh-color-text);
    }
    &.@{class-prefix-button}-fill-none {
      --background-color: transparent;
      --border-width: 0px;
    }
  }
  &:not(&-default) {
    --text-color: var(--amh-color-white);
    --background-color: var(--color);
    --border-color: var(--color);
    &.@{class-prefix-button}-fill-outline {
      --text-color: var(--color);
      --background-color: transparent;
    }
    &.@{class-prefix-button}-fill-none {
      --text-color: var(--color);
      --background-color: transparent;
      --border-width: 0px;
    }
  }

  &-primary {
    --color: var(--amh-color-primary);
    
  }
  &-success {
    --color: var(--amh-color-success);
  }
  &-danger {
    --color: var(--amh-color-danger);
  }
  &-warning {
    --color: var(--amh-color-warning);
  }
  &-blue-primary{
    --color: var(--amh-color-blue-primary);
  }

  &-block {
    display: block;
    width: 100%;
  }

  &-disabled {
    cursor: not-allowed;
    background-color: #D1D3D7;
    border-color: #D1D3D7;
    color:#ffffff;
    // opacity: 0.4;
    &:active::before {
      display: none;
    }  
  }

  &-primary-disabled{
    background:  #D1D3D7;
    opacity: 1;
    border-color: #D1D3D7;;
    color:#ffffff
  }


  &-loading {
    background-color: var(--background-color);
    border-color: var(--background-color);
    vertical-align: bottom;
     opacity: 0.4;
  }
  &-loading-wrapper {
    display: flex;
    height: 1.4em;
    align-items: center;
    justify-content: center;
    > .amh-loading {
      opacity: 0.6;
    }
  }

  &-btn-child{
    display: flex;
    justify-content: center;
    align-items: center;

    img{
      margin-right:10px;
    }
  }
}