@charset "UTF-8";
@import "../../style/function-v2";

$primaryActive: rgba(255, 255, 255, .5);

.im-btn {
  outline: none;
  box-sizing: content-box;

  // --------------- primary ----------------
  &.btn-primary {
    background-color: $primaryNormalBg;

    &:hover {
      background-color: $primaryHoverBg;
    }

    &:active {
      background-color: $primaryPressBg;
      color: $primaryActive;
    }
  }

  // --------------- default ----------------
  &.btn-default {
    border: 1px solid  map-get($defaultNormal, border);
    color: map-get($defaultNormal, text);
    background-color: $white;


    &:hover {
      color: map-get($defaultHover, text);
      background-color: map-get($defaultHover, bg);
      border: 1px solid map-get($defaultHover, bg);
    }

    &:active {
      color: map-get($defaultPress, text);
      background-color: map-get($defaultPress, bg);
      border: 1px solid map-get($defaultPress, bg);
      opacity: 0.5;
    }
  }

  // --------------- size ----------------
  &.btn-s {
    line-height: 36px;
    border-radius: 18px;
    min-width: 100px;
    padding: 0 1em;
  }

  &.btn-m {
    font-size: 16px;
    line-height: 40px;
    min-width: 160px;
    border-radius: 2px;
    padding: 0 1em;
  }

  &.btn-l {
    font-size: 16px;
    line-height: 50px;
    min-width: 200px;
    padding: 0 1em;
  }
}

// --------------- disabled ----------------
.disabled.im-btn, .disabled.im-btn:hover, .disabled.im-btn:active {
  background-color: map-get($disabled, bg) !important;
  color: map-get($disabled, text) !important;
  opacity: 1 !important;
  border: 0;
}

// --------------- danger ----------------
.im-danger {
  background-color: $danger;
  color: $white;
}

// --------------- link ----------------
.im-link {
  color: $normalColor;
  text-decoration: none;
  cursor: pointer;
}

.btn-s--link {
  font-size: 14px;
}

.btn-m--link {
  font-size: 16px;
}

.btn-l--link {
  font-size: 18px;
}