:root {
  --y-button-radius: 4px;
  --y-button-default-color: rgb(223, 223, 223);
  --y-button-primary-color: rgb(20, 184, 166);
  --y-button-primary-hover-color: rgb(25, 170, 153);
  --y-button-primary-active-color: rgb(13, 146, 131);
  --y-button-info-color: rgb(59, 130, 246);
  --y-button-info-hover-color: rgb(49, 117, 228);
  --y-button-info-active-color: rgb(34, 94, 189);
  --y-button-warning-color: rgb(251, 146, 60);
  --y-button-warning-hover-color: rgb(240, 143, 63);
  --y-button-warning-active-color: rgb(211, 118, 41);
  --y-button-danger-color: rgb(220, 38, 38);
  --y-button-danger-hover-color: rgb(204, 42, 42);
  --y-button-danger-active-color: rgb(172, 27, 27);
  --y-button-text-color-light: rgb(243, 244, 246);
  --y-button-text-color-dark: rgb(15, 118, 110);
}

.y-button {
  border-radius: var(--y-button-radius);
  border: 1px solid var(--y-button-default-color);
  padding: 6px 18px;
  font-size: 14px;
  line-height: 20px;
  background-color: white;
  color: var(--y-button-text-color-dark);
  cursor: pointer;
  transition: all 0.2s ease;
  vertical-align: top;
}
.y-button:focus {
  outline: none;
}
.y-button:hover {
  background-color: #f7f7f7;
}
.y-button:active {
  background-color: #ebebeb;
}
.y-button.y-button-primary {
  border-color: var(--y-button-primary-color);
  background-color: var(--y-button-primary-color);
  color: var(--y-button-text-color-light);
}
.y-button.y-button-primary:hover {
  background-color: var(--y-button-primary-hover-color);
}
.y-button.y-button-primary:active {
  background-color: var(--y-button-primary-active-color);
}
.y-button.y-button-info {
  border-color: var(--y-button-info-color);
  background-color: var(--y-button-info-color);
  color: var(--y-button-text-color-light);
}
.y-button.y-button-info:hover {
  background-color: var(--y-button-info-hover-color);
}
.y-button.y-button-info:active {
  background-color: var(--y-button-info-active-color);
}
.y-button.y-button-warning {
  border-color: var(--y-button-warning-color);
  background-color: var(--y-button-warning-color);
  color: var(--y-button-text-color-light);
}
.y-button.y-button-warning:hover {
  background-color: var(--y-button-warning-hover-color);
}
.y-button.y-button-warning:active {
  background-color: var(--y-button-warning-active-color);
}
.y-button.y-button-danger {
  border-color: var(--y-button-danger-color);
  background-color: var(--y-button-danger-color);
  color: var(--y-button-text-color-light);
}
.y-button.y-button-danger:hover {
  background-color: var(--y-button-danger-hover-color);
}
.y-button.y-button-danger:active {
  background-color: var(--y-button-danger-active-color);
}
.y-button.y-button-text {
  border-color: transparent;
  background-color: transparent;
  color: var(--y-button-info-color);
}
.y-button.y-button-text:active {
  color: var(--y-button-info-active-color);
}
.y-button.y-button-block {
  display: block;
  width: 100%;
}
.y-button.y-button-rounded {
  border-radius: 1000px;
}
.y-button.y-button-disabled {
  opacity: var(--y-disabled-opacity);
  cursor: not-allowed;
}
.y-button.y-button-loading {
  opacity: 0.5;
  cursor: default;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 7px 18px;
}
.y-button.y-button-loading .y-button-spin {
  font-size: 18px;
  pointer-events: none;
  animation: spin 0.8s linear infinite;
}
.y-button.y-button-large {
  padding: 8px 22px;
  font-size: 16px;
  line-height: 22px;
}
.y-button.y-button-large.y-button-icon {
  height: 42px;
  width: 42px;
  font-size: 20px;
}
.y-button.y-button-large.y-button-loading {
  padding: 9px 22px;
}
.y-button.y-button-large.y-button-loading .y-button-spin {
  font-size: 20px;
}
.y-button.y-button-small {
  padding: 4px 14px;
  font-size: 12px;
  line-height: 18px;
}
.y-button.y-button-small.y-button-icon {
  height: 26px;
  width: 26px;
  font-size: 12px;
}
.y-button.y-button-small.y-button-loading {
  padding: 6px 14px;
}
.y-button.y-button-small.y-button-loading .y-button-spin {
  font-size: 14px;
}
.y-button.y-button-mini {
  padding: 2px 10px;
  font-size: 10px;
  line-height: 16px;
}
.y-button.y-button-mini.y-button-icon {
  height: 18px;
  width: 18px;
  font-size: 10px;
}
.y-button.y-button-mini.y-button-loading {
  padding: 4px 10px;
}
.y-button.y-button-mini.y-button-loading .y-button-spin {
  font-size: 12px;
}
.y-button.y-button-icon {
  padding: 0;
  height: 34px;
  width: 34px;
  display: inline-grid;
  place-items: center;
  border: none;
  font-size: 16px;
  border-radius: 10000px;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}