button.btn {
  font-family: var(--font-family);
  font-size: var(--text-sm);
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  line-height: normal;
}

button.btn .btn-text {
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (min-width: 768px) {
  button.btn .btn-text {
    padding-top: 16px;
    padding-bottom: 17px;
  }
}

.btn {
  display: inline-block;
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  text-transform: capitalize;
  cursor: pointer;
  margin: 10px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none;
}

.btn-text,
.btn-icon {
  border-radius: 40px;
  border: 1px solid transparent;
}

.btn-text {
  display: inline-block;
  padding: 10px 80px 10px 40px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .btn-text {
    padding: 15px 115px 15px 65px;
  }
}

.btn-icon {
  position: absolute;
  top: 0;
  right: 0;
  height: 41px;
  width: 41px;
}

@media (min-width: 768px) {
  .btn-icon {
    height: 66px;
    width: 66px;
  }
}

.btn-icon span {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  align-content: center;
  font-size: var(--text-lg);
}

.btn-icon-default { display: inline; }
.btn-icon-hover   { display: none; }

.btn:hover .btn-icon-default { display: none; }
.btn:hover .btn-icon-hover   { display: inline; }

.btn-compact .btn-icon,
.btn-min .btn-icon {
  margin-left: 0;
}

.btn-full.btn-light .btn-text {
  color: var(--color-dark);
  background-color: var(--color-accent-light);
  border-color: var(--color-dark);
}

.btn-full.btn-light .btn-icon {
  color: var(--color-light);
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

.btn-full.btn-light:hover .btn-icon {
  color: var(--color-dark);
  background-color: var(--color-accent-light);
}

.btn-full.btn-dark .btn-text {
  color: var(--color-light);
  background-color: var(--color-dark);
  border-color: var(--color-light);
}

.btn-full.btn-dark .btn-icon {
  color: var(--color-dark);
  background-color: var(--color-accent-light);
}

.btn-full.btn-dark:hover .btn-icon {
  color: var(--color-dark);
  background-color: var(--color-light);
}

.btn-compact,
.btn-min {
  height: 30px;
  margin-left: 66px;
}

.btn-compact .btn-text,
.btn-min .btn-text {
  display: none;
}

.btn-compact.btn-light .btn-icon {
  color: var(--color-dark);
  background-color: var(--color-accent-light);
}

.btn-compact.btn-light:hover .btn-icon {
  border-color: var(--color-dark);
}

.btn-compact.btn-dark .btn-icon {
  color: var(--color-accent-light);
  background-color: var(--color-dark);
  border-color: var(--color-accent-light);
}

.btn-compact.btn-dark:hover .btn-icon {
  color: var(--color-light);
  border-color: var(--color-light);
}

.btn-min.btn-light,
.btn-min.btn-dark,
.btn-min.btn-icon,
.btn-min.btn-light .btn-icon,
.btn-min.btn-dark .btn-icon {
  background-color: transparent;
}

.btn-min.btn-light .btn-icon { color: var(--color-accent-light); }
.btn-min.btn-dark .btn-icon  { color: var(--color-dark); }
.btn-min:hover .btn-icon     { color: var(--color-accent-dark); }