shineout/css/Button/styles/button.css

Shein 前端组件库

.so-button {
  display: inline-block;
  margin-bottom: 0;
  border: 1px solid transparent;
  background-image: none;
  cursor: pointer;
  font-weight: normal;
  outline: none;
  text-align: center;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  padding: var(--button-padding-base-vertical, 6px) var(--button-padding-base-horizontal, 12px);
  border-radius: var(--button-border-radius, 3px);
  font-size: var(--button-font-size-base, var(--font-size-base, 14px));
  line-height: var(--common-line-height, 1.42857143);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.so-button-rtl {
  direction: rtl;
  text-align: right;
}
.so-button-spin {
  display: inline-block;
}
.so-button-spin-ltr {
  margin-right: var(--button-spin-margin, 8px);
}
.so-button-spin-rtl {
  margin-left: var(--button-spin-margin, 8px);
}
.so-button:hover,
.so-button:focus {
  z-index: 10;
  color: var(--primary-color-dark-15, #0073e5);
  outline: none;
  text-decoration: none;
}
.so-button::-moz-focus-inner {
  border: 0;
}
.so-button.active {
  background-image: none;
  outline: 0;
}
.so-button + .so-button:not(.so-button-rtl) {
  margin-left: var(--button-margin-left, 12px);
}
.so-button + .so-button-rtl {
  margin-right: var(--button-margin-left, 12px);
}
.so-button[disabled],
fieldset[disabled] .so-button {
  position: relative;
  -webkit-box-shadow: none;
          box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}
.so-button.so-button-disabled {
  opacity: 1;
}
.so-button.so-button-disabled.so-button-link {
  opacity: 0.4;
}
.so-button.so-button-disabled.so-button-text {
  opacity: 0.65;
}
fieldset[disabled] a.so-button {
  pointer-events: none;
}
.so-button-default {
  border-color: var(--button-default-border, #dee2e6);
  background-color: #fff;
  color: var(--button-default-text-color, #333);
  fill: var(--button-default-text-color, #333);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
@-webkit-keyframes btn-focus-default {
  0% {
    -webkit-box-shadow: 0 0 0 0 var(--button-default-border-fade-60, rgba(222, 226, 230, 0.6));
            box-shadow: 0 0 0 0 var(--button-default-border-fade-60, rgba(222, 226, 230, 0.6));
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.4em var(--button-default-border-fade-0, rgba(222, 226, 230, 0));
            box-shadow: 0 0 0 0.4em var(--button-default-border-fade-0, rgba(222, 226, 230, 0));
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.8em var(--button-default-border-fade-0, rgba(222, 226, 230, 0));
            box-shadow: 0 0 0 0.8em var(--button-default-border-fade-0, rgba(222, 226, 230, 0));
  }
}
@keyframes btn-focus-default {
  0% {
    -webkit-box-shadow: 0 0 0 0 var(--button-default-border-fade-60, rgba(222, 226, 230, 0.6));
            box-shadow: 0 0 0 0 var(--button-default-border-fade-60, rgba(222, 226, 230, 0.6));
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.4em var(--button-default-border-fade-0, rgba(222, 226, 230, 0));
            box-shadow: 0 0 0 0.4em var(--button-default-border-fade-0, rgba(222, 226, 230, 0));
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.8em var(--button-default-border-fade-0, rgba(222, 226, 230, 0));
            box-shadow: 0 0 0 0.8em var(--button-default-border-fade-0, rgba(222, 226, 230, 0));
  }
}
.so-button-default:focus,
.so-button-default:hover {
  border-color: var(--primary-color, #3399ff);
  background-color: #fff;
  color: var(--button-default-text-color, #333);
}
.so-button-default:active {
  border-color: var(--primary-color, #3399ff);
  -webkit-animation: btn-focus-default 0.4s ease-out;
          animation: btn-focus-default 0.4s ease-out;
  background-color: #fff;
  color: var(--button-default-text-color, #333);
}
.so-button-default:active {
  background-image: none;
}
.so-button-default[disabled]:hover,
fieldset[disabled] .so-button-default:hover,
.so-button-default[disabled]:focus,
fieldset[disabled] .so-button-default:focus {
  border-color: var(--button-default-border, #dee2e6);
  background-color: #fff;
}
.so-button-default[disabled]:active,
fieldset[disabled] .so-button-default:active {
  -webkit-animation: none;
          animation: none;
}
.so-button-default.so-button-outline:not(.so-button-disabled) {
  border-color: #fff;
  background: transparent;
  color: #fff;
  fill: #fff;
}
.so-button-default.so-button-outline:not(.so-button-disabled):focus,
.so-button-default.so-button-outline:not(.so-button-disabled):hover {
  background-color: #fff;
  color: var(--button-default-text-color, #333);
}
.so-button-default.so-button-outline:not(.so-button-disabled):active {
  -webkit-animation: btn-focus-default 0.4s ease-out;
          animation: btn-focus-default 0.4s ease-out;
  background-color: #fff;
  color: var(--button-default-text-color, #333);
}
.so-button-default.so-button-outline:not(.so-button-disabled)[disabled]:hover,
fieldset[disabled] .so-button-default.so-button-outline:not(.so-button-disabled):hover,
.so-button-default.so-button-outline:not(.so-button-disabled)[disabled]:focus,
fieldset[disabled] .so-button-default.so-button-outline:not(.so-button-disabled):focus {
  border-color: #fff;
  background: transparent;
  color: #fff;
}
.so-button-default.so-button-outline:not(.so-button-disabled)[disabled]:active,
fieldset[disabled] .so-button-default.so-button-outline:not(.so-button-disabled):active {
  -webkit-animation: none;
          animation: none;
}
.so-button-default:not(.so-button-disabled):hover,
.so-button-default:not(.so-button-disabled):focus,
.so-button-default:not(.so-button-disabled):active {
  color: var(--primary-color, #3399ff);
}
.so-button-default:not(.so-button-disabled):hover .so-icon,
.so-button-default:not(.so-button-disabled):focus .so-icon,
.so-button-default:not(.so-button-disabled):active .so-icon {
  color: var(--primary-color, #3399ff);
  fill: var(--primary-color, #3399ff);
}
.so-button-default[disabled]:hover {
  color: var(--button-default-text-color, #333);
  fill: var(--primary-color, #3399ff);
}
.so-button-primary {
  border-color: transparent;
  background-color: var(--primary-color, #3399ff);
  color: #fff;
  fill: #fff;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
@-webkit-keyframes btn-focus-primary {
  0% {
    -webkit-box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
            box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
            box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
            box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
  }
}
@keyframes btn-focus-primary {
  0% {
    -webkit-box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
            box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
            box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
            box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
  }
}
.so-button-primary:focus,
.so-button-primary:hover {
  border-color: var(--primary-color, #3399ff);
  background-color: var(--primary-color-dark-btn-hover, #007fff);
  color: #fff;
}
.so-button-primary:active {
  border-color: var(--primary-color, #3399ff);
  -webkit-animation: btn-focus-primary 0.4s ease-out;
          animation: btn-focus-primary 0.4s ease-out;
  background-color: var(--primary-color-dark-btn-hover, #007fff);
  color: #fff;
}
.so-button-primary:active {
  background-image: none;
}
.so-button-primary[disabled]:hover,
fieldset[disabled] .so-button-primary:hover,
.so-button-primary[disabled]:focus,
fieldset[disabled] .so-button-primary:focus {
  border-color: transparent;
  background-color: var(--primary-color, #3399ff);
}
.so-button-primary[disabled]:active,
fieldset[disabled] .so-button-primary:active {
  -webkit-animation: none;
          animation: none;
}
.so-button-primary.so-button-outline:not(.so-button-disabled) {
  border-color: var(--primary-color, #3399ff);
  background: transparent;
  color: var(--primary-color, #3399ff);
  fill: var(--primary-color, #3399ff);
}
.so-button-primary.so-button-outline:not(.so-button-disabled):focus,
.so-button-primary.so-button-outline:not(.so-button-disabled):hover {
  background-color: var(--primary-color, #3399ff);
  color: #fff;
}
.so-button-primary.so-button-outline:not(.so-button-disabled):active {
  -webkit-animation: btn-focus-primary 0.4s ease-out;
          animation: btn-focus-primary 0.4s ease-out;
  background-color: var(--primary-color, #3399ff);
  color: #fff;
}
.so-button-primary.so-button-outline:not(.so-button-disabled)[disabled]:hover,
fieldset[disabled] .so-button-primary.so-button-outline:not(.so-button-disabled):hover,
.so-button-primary.so-button-outline:not(.so-button-disabled)[disabled]:focus,
fieldset[disabled] .so-button-primary.so-button-outline:not(.so-button-disabled):focus {
  border-color: var(--primary-color, #3399ff);
  background: transparent;
  color: var(--primary-color, #3399ff);
}
.so-button-primary.so-button-outline:not(.so-button-disabled)[disabled]:active,
fieldset[disabled] .so-button-primary.so-button-outline:not(.so-button-disabled):active {
  -webkit-animation: none;
          animation: none;
}
.so-button-secondary {
  border-color: transparent;
  background-color: var(--secondary-color, #999999);
  color: #fff;
  fill: #fff;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
@-webkit-keyframes btn-focus-secondary {
  0% {
    -webkit-box-shadow: 0 0 0 0 var(--secondary-color-dark-5_fade-60, rgba(140, 140, 140, 0.6));
            box-shadow: 0 0 0 0 var(--secondary-color-dark-5_fade-60, rgba(140, 140, 140, 0.6));
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.4em var(--secondary-color-dark-5_fade-0, rgba(140, 140, 140, 0));
            box-shadow: 0 0 0 0.4em var(--secondary-color-dark-5_fade-0, rgba(140, 140, 140, 0));
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.8em var(--secondary-color-dark-5_fade-0, rgba(140, 140, 140, 0));
            box-shadow: 0 0 0 0.8em var(--secondary-color-dark-5_fade-0, rgba(140, 140, 140, 0));
  }
}
@keyframes btn-focus-secondary {
  0% {
    -webkit-box-shadow: 0 0 0 0 var(--secondary-color-dark-5_fade-60, rgba(140, 140, 140, 0.6));
            box-shadow: 0 0 0 0 var(--secondary-color-dark-5_fade-60, rgba(140, 140, 140, 0.6));
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.4em var(--secondary-color-dark-5_fade-0, rgba(140, 140, 140, 0));
            box-shadow: 0 0 0 0.4em var(--secondary-color-dark-5_fade-0, rgba(140, 140, 140, 0));
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.8em var(--secondary-color-dark-5_fade-0, rgba(140, 140, 140, 0));
            box-shadow: 0 0 0 0.8em var(--secondary-color-dark-5_fade-0, rgba(140, 140, 140, 0));
  }
}
.so-button-secondary:focus,
.so-button-secondary:hover {
  border-color: var(--secondary-color, #999999);
  background-color: var(--secondary-color-dark-btn-hover, #808080);
  color: #fff;
}
.so-button-secondary:active {
  border-color: var(--secondary-color, #999999);
  -webkit-animation: btn-focus-secondary 0.4s ease-out;
          animation: btn-focus-secondary 0.4s ease-out;
  background-color: var(--secondary-color-dark-btn-hover, #808080);
  color: #fff;
}
.so-button-secondary:active {
  background-image: none;
}
.so-button-secondary[disabled]:hover,
fieldset[disabled] .so-button-secondary:hover,
.so-button-secondary[disabled]:focus,
fieldset[disabled] .so-button-secondary:focus {
  border-color: transparent;
  background-color: var(--secondary-color, #999999);
}
.so-button-secondary[disabled]:active,
fieldset[disabled] .so-button-secondary:active {
  -webkit-animation: none;
          animation: none;
}
.so-button-secondary.so-button-outline:not(.so-button-disabled) {
  border-color: var(--secondary-color, #999999);
  background: transparent;
  color: var(--secondary-color, #999999);
  fill: var(--secondary-color, #999999);
}
.so-button-secondary.so-button-outline:not(.so-button-disabled):focus,
.so-button-secondary.so-button-outline:not(.so-button-disabled):hover {
  background-color: var(--secondary-color, #999999);
  color: #fff;
}
.so-button-secondary.so-button-outline:not(.so-button-disabled):active {
  -webkit-animation: btn-focus-secondary 0.4s ease-out;
          animation: btn-focus-secondary 0.4s ease-out;
  background-color: var(--secondary-color, #999999);
  color: #fff;
}
.so-button-secondary.so-button-outline:not(.so-button-disabled)[disabled]:hover,
fieldset[disabled] .so-button-secondary.so-button-outline:not(.so-button-disabled):hover,
.so-button-secondary.so-button-outline:not(.so-button-disabled)[disabled]:focus,
fieldset[disabled] .so-button-secondary.so-button-outline:not(.so-button-disabled):focus {
  border-color: var(--secondary-color, #999999);
  background: transparent;
  color: var(--secondary-color, #999999);
}
.so-button-secondary.so-button-outline:not(.so-button-disabled)[disabled]:active,
fieldset[disabled] .so-button-secondary.so-button-outline:not(.so-button-disabled):active {
  -webkit-animation: none;
          animation: none;
}
.so-button-success {
  border-color: transparent;
  background-color: var(--success-color, #00cc66);
  color: #fff;
  fill: #fff;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
@-webkit-keyframes btn-focus-success {
  0% {
    -webkit-box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
            box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
            box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
            box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
  }
}
@keyframes btn-focus-success {
  0% {
    -webkit-box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
            box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
            box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
            box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
  }
}
.so-button-success:focus,
.so-button-success:hover {
  border-color: var(--success-color, #00cc66);
  background-color: var(--success-color-dark-btn-hover, #00994d);
  color: #fff;
}
.so-button-success:active {
  border-color: var(--success-color, #00cc66);
  -webkit-animation: btn-focus-success 0.4s ease-out;
          animation: btn-focus-success 0.4s ease-out;
  background-color: var(--success-color-dark-btn-hover, #00994d);
  color: #fff;
}
.so-button-success:active {
  background-image: none;
}
.so-button-success[disabled]:hover,
fieldset[disabled] .so-button-success:hover,
.so-button-success[disabled]:focus,
fieldset[disabled] .so-button-success:focus {
  border-color: transparent;
  background-color: var(--success-color, #00cc66);
}
.so-button-success[disabled]:active,
fieldset[disabled] .so-button-success:active {
  -webkit-animation: none;
          animation: none;
}
.so-button-success.so-button-outline:not(.so-button-disabled) {
  border-color: var(--success-color, #00cc66);
  background: transparent;
  color: var(--success-color, #00cc66);
  fill: var(--success-color, #00cc66);
}
.so-button-success.so-button-outline:not(.so-button-disabled):focus,
.so-button-success.so-button-outline:not(.so-button-disabled):hover {
  background-color: var(--success-color, #00cc66);
  color: #fff;
}
.so-button-success.so-button-outline:not(.so-button-disabled):active {
  -webkit-animation: btn-focus-success 0.4s ease-out;
          animation: btn-focus-success 0.4s ease-out;
  background-color: var(--success-color, #00cc66);
  color: #fff;
}
.so-button-success.so-button-outline:not(.so-button-disabled)[disabled]:hover,
fieldset[disabled] .so-button-success.so-button-outline:not(.so-button-disabled):hover,
.so-button-success.so-button-outline:not(.so-button-disabled)[disabled]:focus,
fieldset[disabled] .so-button-success.so-button-outline:not(.so-button-disabled):focus {
  border-color: var(--success-color, #00cc66);
  background: transparent;
  color: var(--success-color, #00cc66);
}
.so-button-success.so-button-outline:not(.so-button-disabled)[disabled]:active,
fieldset[disabled] .so-button-success.so-button-outline:not(.so-button-disabled):active {
  -webkit-animation: none;
          animation: none;
}
.so-button-info {
  border-color: transparent;
  background-color: var(--info-color, #17a2b8);
  color: #fff;
  fill: #fff;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
@-webkit-keyframes btn-focus-info {
  0% {
    -webkit-box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
            box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
            box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
            box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
  }
}
@keyframes btn-focus-info {
  0% {
    -webkit-box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
            box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
            box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
            box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
  }
}
.so-button-info:focus,
.so-button-info:hover {
  border-color: var(--info-color, #17a2b8);
  background-color: var(--info-color-dark-btn-hover, #117a8b);
  color: #fff;
}
.so-button-info:active {
  border-color: var(--info-color, #17a2b8);
  -webkit-animation: btn-focus-info 0.4s ease-out;
          animation: btn-focus-info 0.4s ease-out;
  background-color: var(--info-color-dark-btn-hover, #117a8b);
  color: #fff;
}
.so-button-info:active {
  background-image: none;
}
.so-button-info[disabled]:hover,
fieldset[disabled] .so-button-info:hover,
.so-button-info[disabled]:focus,
fieldset[disabled] .so-button-info:focus {
  border-color: transparent;
  background-color: var(--info-color, #17a2b8);
}
.so-button-info[disabled]:active,
fieldset[disabled] .so-button-info:active {
  -webkit-animation: none;
          animation: none;
}
.so-button-info.so-button-outline:not(.so-button-disabled) {
  border-color: var(--info-color, #17a2b8);
  background: transparent;
  color: var(--info-color, #17a2b8);
  fill: var(--info-color, #17a2b8);
}
.so-button-info.so-button-outline:not(.so-button-disabled):focus,
.so-button-info.so-button-outline:not(.so-button-disabled):hover {
  background-color: var(--info-color, #17a2b8);
  color: #fff;
}
.so-button-info.so-button-outline:not(.so-button-disabled):active {
  -webkit-animation: btn-focus-info 0.4s ease-out;
          animation: btn-focus-info 0.4s ease-out;
  background-color: var(--info-color, #17a2b8);
  color: #fff;
}
.so-button-info.so-button-outline:not(.so-button-disabled)[disabled]:hover,
fieldset[disabled] .so-button-info.so-button-outline:not(.so-button-disabled):hover,
.so-button-info.so-button-outline:not(.so-button-disabled)[disabled]:focus,
fieldset[disabled] .so-button-info.so-button-outline:not(.so-button-disabled):focus {
  border-color: var(--info-color, #17a2b8);
  background: transparent;
  color: var(--info-color, #17a2b8);
}
.so-button-info.so-button-outline:not(.so-button-disabled)[disabled]:active,
fieldset[disabled] .so-button-info.so-button-outline:not(.so-button-disabled):active {
  -webkit-animation: none;
          animation: none;
}
.so-button-warning {
  border-color: transparent;
  background-color: var(--warning-color, #ff9900);
  color: #fff;
  fill: #fff;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
@-webkit-keyframes btn-focus-warning {
  0% {
    -webkit-box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
            box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
            box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
            box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
  }
}
@keyframes btn-focus-warning {
  0% {
    -webkit-box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
            box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
            box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
            box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
  }
}
.so-button-warning:focus,
.so-button-warning:hover {
  border-color: var(--warning-color, #ff9900);
  background-color: var(--warning-color-dark-btn-hover, #cc7a00);
  color: #fff;
}
.so-button-warning:active {
  border-color: var(--warning-color, #ff9900);
  -webkit-animation: btn-focus-warning 0.4s ease-out;
          animation: btn-focus-warning 0.4s ease-out;
  background-color: var(--warning-color-dark-btn-hover, #cc7a00);
  color: #fff;
}
.so-button-warning:active {
  background-image: none;
}
.so-button-warning[disabled]:hover,
fieldset[disabled] .so-button-warning:hover,
.so-button-warning[disabled]:focus,
fieldset[disabled] .so-button-warning:focus {
  border-color: transparent;
  background-color: var(--warning-color, #ff9900);
}
.so-button-warning[disabled]:active,
fieldset[disabled] .so-button-warning:active {
  -webkit-animation: none;
          animation: none;
}
.so-button-warning.so-button-outline:not(.so-button-disabled) {
  border-color: var(--warning-color, #ff9900);
  background: transparent;
  color: var(--warning-color, #ff9900);
  fill: var(--warning-color, #ff9900);
}
.so-button-warning.so-button-outline:not(.so-button-disabled):focus,
.so-button-warning.so-button-outline:not(.so-button-disabled):hover {
  background-color: var(--warning-color, #ff9900);
  color: #fff;
}
.so-button-warning.so-button-outline:not(.so-button-disabled):active {
  -webkit-animation: btn-focus-warning 0.4s ease-out;
          animation: btn-focus-warning 0.4s ease-out;
  background-color: var(--warning-color, #ff9900);
  color: #fff;
}
.so-button-warning.so-button-outline:not(.so-button-disabled)[disabled]:hover,
fieldset[disabled] .so-button-warning.so-button-outline:not(.so-button-disabled):hover,
.so-button-warning.so-button-outline:not(.so-button-disabled)[disabled]:focus,
fieldset[disabled] .so-button-warning.so-button-outline:not(.so-button-disabled):focus {
  border-color: var(--warning-color, #ff9900);
  background: transparent;
  color: var(--warning-color, #ff9900);
}
.so-button-warning.so-button-outline:not(.so-button-disabled)[disabled]:active,
fieldset[disabled] .so-button-warning.so-button-outline:not(.so-button-disabled):active {
  -webkit-animation: none;
          animation: none;
}
.so-button-error,
.so-button-danger {
  border-color: transparent;
  background-color: var(--danger-color, #f85555);
  color: #fff;
  fill: #fff;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
@-webkit-keyframes btn-focus-danger {
  0% {
    -webkit-box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
            box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
            box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
            box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
  }
}
@keyframes btn-focus-danger {
  0% {
    -webkit-box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
            box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
            box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
            box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
  }
}
.so-button-error:focus,
.so-button-danger:focus,
.so-button-error:hover,
.so-button-danger:hover {
  border-color: var(--danger-color, #f85555);
  background-color: var(--danger-color-dark-btn-hover, #f62424);
  color: #fff;
}
.so-button-error:active,
.so-button-danger:active {
  border-color: var(--danger-color, #f85555);
  -webkit-animation: btn-focus-danger 0.4s ease-out;
          animation: btn-focus-danger 0.4s ease-out;
  background-color: var(--danger-color-dark-btn-hover, #f62424);
  color: #fff;
}
.so-button-error:active,
.so-button-danger:active {
  background-image: none;
}
.so-button-error[disabled]:hover,
.so-button-danger[disabled]:hover,
fieldset[disabled] .so-button-error:hover,
fieldset[disabled] .so-button-danger:hover,
.so-button-error[disabled]:focus,
.so-button-danger[disabled]:focus,
fieldset[disabled] .so-button-error:focus,
fieldset[disabled] .so-button-danger:focus {
  border-color: transparent;
  background-color: var(--danger-color, #f85555);
}
.so-button-error[disabled]:active,
.so-button-danger[disabled]:active,
fieldset[disabled] .so-button-error:active,
fieldset[disabled] .so-button-danger:active {
  -webkit-animation: none;
          animation: none;
}
.so-button-error.so-button-outline:not(.so-button-disabled),
.so-button-danger.so-button-outline:not(.so-button-disabled) {
  border-color: var(--danger-color, #f85555);
  background: transparent;
  color: var(--danger-color, #f85555);
  fill: var(--danger-color, #f85555);
}
.so-button-error.so-button-outline:not(.so-button-disabled):focus,
.so-button-danger.so-button-outline:not(.so-button-disabled):focus,
.so-button-error.so-button-outline:not(.so-button-disabled):hover,
.so-button-danger.so-button-outline:not(.so-button-disabled):hover {
  background-color: var(--danger-color, #f85555);
  color: #fff;
}
.so-button-error.so-button-outline:not(.so-button-disabled):active,
.so-button-danger.so-button-outline:not(.so-button-disabled):active {
  -webkit-animation: btn-focus-danger 0.4s ease-out;
          animation: btn-focus-danger 0.4s ease-out;
  background-color: var(--danger-color, #f85555);
  color: #fff;
}
.so-button-error.so-button-outline:not(.so-button-disabled)[disabled]:hover,
.so-button-danger.so-button-outline:not(.so-button-disabled)[disabled]:hover,
fieldset[disabled] .so-button-error.so-button-outline:not(.so-button-disabled):hover,
fieldset[disabled] .so-button-danger.so-button-outline:not(.so-button-disabled):hover,
.so-button-error.so-button-outline:not(.so-button-disabled)[disabled]:focus,
.so-button-danger.so-button-outline:not(.so-button-disabled)[disabled]:focus,
fieldset[disabled] .so-button-error.so-button-outline:not(.so-button-disabled):focus,
fieldset[disabled] .so-button-danger.so-button-outline:not(.so-button-disabled):focus {
  border-color: var(--danger-color, #f85555);
  background: transparent;
  color: var(--danger-color, #f85555);
}
.so-button-error.so-button-outline:not(.so-button-disabled)[disabled]:active,
.so-button-danger.so-button-outline:not(.so-button-disabled)[disabled]:active,
fieldset[disabled] .so-button-error.so-button-outline:not(.so-button-disabled):active,
fieldset[disabled] .so-button-danger.so-button-outline:not(.so-button-disabled):active {
  -webkit-animation: none;
          animation: none;
}
.so-button-text {
  background: transparent;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding-left: 4px;
  padding-right: 4px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.so-button-text:not(:disabled):hover {
  opacity: 0.8;
}
.so-button-text,
.so-button-text:hover,
.so-button-text:focus,
.so-button-text:active {
  background: transparent;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-animation: none;
          animation: none;
}
.so-button-text:disabled:hover {
  background: transparent;
}
.so-button-text.so-button-primary {
  color: var(--primary-color, #3399ff);
}
.so-button-text.so-button-success {
  color: var(--success-color, #00cc66);
}
.so-button-text.so-button-info {
  color: var(--info-color, #17a2b8);
}
.so-button-text.so-button-danger {
  color: var(--danger-color, #f85555);
}
.so-button-text.so-button-warning {
  color: var(--warning-color, #ff9900);
}
.so-button-text.so-button-secondary {
  color: var(--secondary-color, #999999);
}
.so-button-link {
  border-radius: 0;
  color: var(--primary-color, #3399ff);
  font-weight: normal;
}
.so-button-link,
.so-button-link:active,
.so-button-link[disabled],
fieldset[disabled] .so-button-link {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.so-button-link,
.so-button-link:hover,
.so-button-link:focus,
.so-button-link:active {
  border-color: transparent;
}
.so-button-link:hover,
.so-button-link:focus {
  background-color: transparent;
  color: var(--primary-color-dark-15, #0073e5);
  text-decoration: none;
}
.so-button-link[disabled]:hover,
fieldset[disabled] .so-button-link:hover,
.so-button-link[disabled]:focus,
fieldset[disabled] .so-button-link:focus {
  color: var(--primary-color, #3399ff);
  text-decoration: none;
}
.so-button-large {
  padding: var(--button-padding-large-vertical, 8px) var(--button-padding-large-horizontal, 16px);
  border-radius: var(--button-large-border-radius, 4px);
  font-size: var(--button-font-size-large, var(--font-size-large, 18px));
  line-height: var(--common-line-height, 1.42857143);
}
.so-button-small {
  padding: var(--button-padding-small-vertical, 5px) var(--button-padding-small-horizontal, 10px);
  border-radius: var(--button-small-border-radius, 3px);
  font-size: var(--button-font-size-small, var(--font-size-small, 12px));
  line-height: 1.5;
}
.so-button-disabled:not(.so-button-link):not(.so-button-text),
.so-button-disabled:not(.so-button-link):not(.so-button-text):hover {
  background: var(--button-disabled-bg, #f5f5f5);
  color: var(--button-disabled-color, rgba(0, 0, 0, 0.45));
  fill: var(--button-disabled-color, rgba(0, 0, 0, 0.45));
  border-color: var(--button-disabled-border-color, #d9d9d9);
}
.so-button-circle {
  border-radius: 50%;
  min-width: 34px;
  padding-left: 0;
  padding-right: 0;
}
.so-button-circle.so-button-large {
  min-width: 43px;
}
.so-button-circle.so-button-small {
  min-width: 30px;
}
.so-button-round {
  border-radius: 1000px;
}
.so-button-group .so-button {
  position: relative;
  border-right-width: 0;
  border-left-width: 0;
}
.so-button-group .so-button:not(.so-button-group .so-button-rtl) {
  margin-left: 0px;
}
.so-button-group .so-button-rtl {
  margin-right: 0px;
}
.so-button-group .so-button:before {
  position: absolute;
  top: 50%;
  left: 0;
  height: 50%;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: rgba(255, 255, 255, 0.4);
  content: ' ';
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.so-button-group-rtl.so-button-group .so-button:before {
  left: auto;
  right: 0;
}
.so-button-group .so-button:first-child:not(.so-button-rtl) {
  margin-left: 0;
  border-left-width: 1px;
}
.so-button-group .so-button:first-child.so-button-rtl {
  border-right-width: 1px;
  margin-right: 0;
}
.so-button-group .so-button:first-child:before {
  display: none;
}
.so-button-group .so-button:last-child:not(.so-button-rtl) {
  border-right-width: 1px;
}
.so-button-group .so-button:last-child.so-button-rtl {
  border-left-width: 1px;
}
.so-button-group .so-button:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.so-button-group .so-button:first-child:not(:last-child):not(.so-button-rtl) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.so-button-group .so-button:first-child:not(:last-child).so-button-rtl {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.so-button-group .so-button:last-child:not(:first-child):not(.so-button-rtl) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.so-button-group .so-button:last-child:not(:first-child).so-button-rtl {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.so-button-group .so-button:before {
  border-left-color: #d9d9d9;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.so-button-group .so-button:not(.so-button-outline):not(.so-button-default):not(.so-button-disabled):before {
  border-left-color: white;
}
.so-button-group .so-button.so-button-outline:not(.so-button-default):before {
  border-left-color: inherit;
}
.so-button-group .so-button.so-button-disabled:before {
  border-left-color: white;
}
.so-button-group .so-button.so-button-disabled.so-button-default:before,
.so-button-group .so-button.so-button-disabled.so-button-outline:before {
  border-left-color: var(--button-disabled-delimiter, #d9d9d9);
}
.so-button-group .so-button.so-button-disabled + .so-button:not(.so-button-disabled):before {
  border-left-color: transparent;
}
.so-button-group .so-button.so-button-disabled + .so-button:not(.so-button-disabled).so-button-outline:not(.so-button-default):before {
  height: 100%;
  border-left-color: var(--primary-color, #3399ff);
}
.so-button-group .so-button:not(.so-button-disabled) + .so-button-disabled:before {
  border-left-color: transparent;
}
.so-button-group .so-button:not(.so-button-disabled) + .so-button-disabled.so-button-outline:not(.so-button-default):before {
  height: 100%;
  border-left-color: var(--primary-color, #3399ff);
}
.so-button-group .so-button.so-button-default:not(.so-button-disabled):hover:before,
.so-button-group .so-button.so-button-default:not(.so-button-disabled):active:before,
.so-button-group .so-button.so-button-default:not(.so-button-disabled):focus:before,
.so-button-group .so-button.so-button-default:not(.so-button-disabled):hover + .so-button:before,
.so-button-group .so-button.so-button-default:not(.so-button-disabled):active + .so-button:before,
.so-button-group .so-button.so-button-default:not(.so-button-disabled):focus + .so-button:before {
  border-left-color: var(--primary-color, #3399ff);
  height: 100%;
}
.so-button-group .so-button.so-button-default:not(.so-button-disabled):hover + .so-dropdown-split-dropdown > .so-dropdown-button.so-dropdown-split-button:before,
.so-button-group .so-button.so-button-default:not(.so-button-disabled):active + .so-dropdown-split-dropdown > .so-dropdown-button.so-dropdown-split-button:before,
.so-button-group .so-button.so-button-default:not(.so-button-disabled):focus + .so-dropdown-split-dropdown > .so-dropdown-button.so-dropdown-split-button:before {
  border-left-color: var(--primary-color, #3399ff);
  height: 100%;
}
.so-button-group .so-button.so-button-outline:not(.so-button-disabled):hover:before,
.so-button-group .so-button.so-button-outline:not(.so-button-disabled):active:before,
.so-button-group .so-button.so-button-outline:not(.so-button-disabled):focus:before {
  border-left-color: inherit;
}
.so-button-group .so-button.so-button-outline:not(.so-button-disabled):hover + .so-button:not(.so-button-disabled):before,
.so-button-group .so-button.so-button-outline:not(.so-button-disabled):active + .so-button:not(.so-button-disabled):before,
.so-button-group .so-button.so-button-outline:not(.so-button-disabled):focus + .so-button:not(.so-button-disabled):before {
  height: 0;
  -webkit-transition: none;
  transition: none;
}
.so-button-from-input-group .so-button:before {
  border-left: none;
}
.so-button .so-dropdown {
  border-top-width: 1px;
  border-bottom-width: 1px;
}