button[prop-type='link'] {
  font-family: 'Inter UI';
  background-color: transparent;
  font-weight: 400;
  text-decoration: underline;
  user-select: auto;
  padding: 0rem;
}

button[prop-type='link']:disabled {
  color: #B3B3B3;
}

button[prop-type='link'][prop-size='sm'] {
  font-size: 3.5rem;
  margin-bottom: 0rem;
}

button[prop-type='link'][prop-size="md"] {
  font-size: 4rem;
  margin-bottom: 1rem;
}

button[prop-type='link'][prop-size='lg'] {
  font-size: 5rem;
  margin-bottom: 2rem;
}

button.solid {
  font-family: 'Inter UI';
  border-width: 2px;
  border-style: solid;
}

button[prop-type='solid'][prop-color='blue'] {
  background-color: #4330FC;
  border-color: #4330FC;
  color: white;
}

button[prop-type='solid'][prop-color='blue']:focus {
  box-shadow: 0 0 0 3px #DAD6FF;
}

button[prop-type='solid'][prop-color='green'] {
  background-color: #2AA779;
  border-color: #2AA779;
  color: white;
}

button[prop-type='solid'][prop-color='green']:focus {
  box-shadow: 0 0 0 3px #C5FBE7;
}

button[prop-type='solid'][prop-color='yellow'] {
  background-color: #F8C134;
  border-color: #F8C134;
  color: white;
}

button[prop-type='solid'][prop-color='yellow']:focus {
  box-shadow: 0 0 0 3px #FFEFC5;
}

button[prop-type='solid'][prop-size*='sm'] {
  height: 6rem;
  padding: 0 2rem 0 2rem;
  font-size: 3rem;
}

button[prop-type='solid'][prop-size*='md'] {
  height: 9rem;
  padding: 0 4rem 0 4rem;
  font-size: 3.5rem;
}

button[prop-type='solid'][prop-size*='lg'] {
  height: 11rem;
  padding: 0 6rem 0 6rem;
  font-size: 4rem;
}

button[prop-type='solid'][prop-size*='xl'] {
  height: 16rem;
  padding: 0 6rem 0 6rem;
  font-size: 4.5rem;
}

button[prop-type='solid']:disabled {
  background-color: #B3B3B3;
  border-color: #B3B3B3;
}

button[prop-type='solid'][prop-size*='wide'] {
  width: 100%;
}

.btn-spinner {
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  left: -35px;
}

.btn-spinner::after {
  position: absolute;
  width: 16px;
  height: 16px;
  bottom: 0;
  content: "◠";
  animation: spin linear 1s infinite;
  font-size: 20px;
  line-height: 20px;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }