.queens-button[data-v-018527ba] {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: 44px;
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s;
  appearance: none;
}
.queens-button[data-v-018527ba]::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #000;
  border: inherit;
  border-color: #000;
  border-radius: inherit;
  /* inherit parent's border radius */
  transform: translate(-50%, -50%);
  opacity: 0;
  content: ' ';
}
.queens-button[data-v-018527ba]:active::before {
  opacity: 0.1;
}
.queens-button[data-v-018527ba]:not(:last-child) {
  margin-right: 16px;
}
.queens-button--loading[data-v-018527ba]::before,
.queens-button--disabled[data-v-018527ba]::before {
  display: none;
}
.queens-button--default[data-v-018527ba] {
  color: #323233;
  background-color: #fff;
  border: 1px solid #F3F7F8;
}
.queens-button--primary[data-v-018527ba] {
  color: #fff;
  background-color: #7263FF;
  border: 1px solid #7263FF;
}
.queens-button--info[data-v-018527ba] {
  color: #fff;
  background-color: #1989fa;
  border: 1px solid #1989fa;
}
.queens-button--danger[data-v-018527ba] {
  color: #fff;
  background-color: #ee0a24;
  border: 1px solid #ee0a24;
}
.queens-button--warning[data-v-018527ba] {
  color: #fff;
  background-color: #ff976a;
  border: 1px solid #ff976a;
}
.queens-button--plain[data-v-018527ba] {
  background-color: #fff;
}
.queens-button--plain.queens-button--primary[data-v-018527ba] {
  color: #7263FF;
}
.queens-button--plain.queens-button--info[data-v-018527ba] {
  color: #1989fa;
}
.queens-button--plain.queens-button--danger[data-v-018527ba] {
  color: #ee0a24;
}
.queens-button--plain.queens-button--warning[data-v-018527ba] {
  color: #ff976a;
}
.queens-button--large[data-v-018527ba] {
  width: 100%;
  height: 48px;
  font-weight: 500;
}
.queens-button--normal[data-v-018527ba] {
  padding: 0 15px;
  font-size: 16px;
}
.queens-button--small[data-v-018527ba] {
  height: 32px;
  padding: 0 8px;
  font-size: 14px;
}
.queens-button__loading[data-v-018527ba] {
  color: inherit;
  font-size: inherit;
}
.queens-button--mini[data-v-018527ba] {
  height: 24px;
  padding: 0 4px;
  font-size: 12px;
}
.queens-button--mini + .queens-button--mini[data-v-018527ba] {
  margin-left: 4px;
}
.queens-button--block[data-v-018527ba] {
  display: block;
  width: 100%;
}
.queens-button--disabled[data-v-018527ba] {
  cursor: not-allowed;
  opacity: 0.5;
}
.queens-button--loading[data-v-018527ba] {
  cursor: default;
}
.queens-button--round[data-v-018527ba] {
  border-radius: 24px;
}
.queens-button--square[data-v-018527ba] {
  border-radius: 0;
}
.queens-button__content[data-v-018527ba] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.queens-button__icon[data-v-018527ba] {
  min-width: 1em;
  font-size: 1.2em;
  line-height: inherit;
}
.queens-button__icon + .queens-button__text[data-v-018527ba],
.queens-button__loading + .queens-button__text[data-v-018527ba] {
  margin-left: 5px;
}
.queens-button--hairline[data-v-018527ba] {
  border-width: 0;
}
.queens-button--hairline[data-v-018527ba]::after {
  border-color: inherit;
  border-radius: 4px;
}
.queens-button--hairline.queens-button--round[data-v-018527ba]::after {
  border-radius: 24px;
}
.queens-button--hairline.queens-button--square[data-v-018527ba]::after {
  border-radius: 0;
}
.queens-button .queens-loading[data-v-018527ba] {
  position: relative;
  vertical-align: middle;
  margin-right: 4px;
}
.queens-button .queens-loading .queens-loading__spinner[data-v-018527ba] {
  position: relative;
  display: inline-block;
  width: 30px;
  max-width: 100%;
  height: 30px;
  max-height: 100%;
  vertical-align: middle;
  animation: queens-rotate-data-v-018527ba 0.8s linear infinite;
}
.queens-button .queens-loading .queens-loading__circular[data-v-018527ba] {
  display: block;
  width: 100%;
  height: 100%;
}
.queens-button .queens-loading .queens-loading__circular circle[data-v-018527ba] {
  animation: queens-circular-data-v-018527ba 1.5s ease-in-out infinite;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}
@keyframes queens-rotate-data-v-018527ba {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes queens-circular-data-v-018527ba {
0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
}
50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40;
}
100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120;
}
}