.link {
  font-size: 16px;
  text-decoration: underline;

  &:hover {
    font-weight: bold;
  }
}

.link-action {
  color: var(--color-black);

  &:hover {
    color: var(--color-black);
    font-weight: bold;
  }
}

.link-destroy {
  color: var(--color-destroy);

  &:hover {
    color: var(--color-destroy);
    font-weight: bold;
  }
}

.btn-pay {
  width:100%;
  background: var(--color-teal);
  border-color: var(--color-teal);
  font-size: 25px;
  font-family: var(--font-family-text);
  color: var(--color-white);

  &:hover {
    background-color: var(--color-white);
    border-color: var(--color-teal);
    color: var(--color-teal);
  }
}

a.btn-submit-business, input.btn-submit-business{
  color: var(--color-purple);
  border-color: var(--color-purple);

  &:hover {
    box-shadow: inset 0 0 0 50px var(--color-hover-purple);
    border-color: var(--color-purple);
    a{
      color: var(--color-white);
    }
  }
}

a.btn-submit-freemium, a.btn-submit-premium, input.btn-submit-freemium, input.btn-submit-premium{
  color: var(--color-blue);
  border-color: var(--color-blue);
  &:hover {
    box-shadow: inset 0 0 0 50px var(--color-active-blue);
    border-color: var(--color-blue);
    a{
      color: var(--color-white);
    }
  }
}

/* Liste développée à la main : ces sélecteurs n'ont pas la même spécificité, et `&` prend celle du plus */
/* spécifique d'entre eux (il vaut :is(…)), là où Sass écrivait la liste. Imbriquée, la règle changerait */
/* de rang dans la cascade sans changer de texte (docs/hotwire.md, étape 6d). */
.btn-submit,
a.mybot-previous,
input.mybot-previous {
  background-color: var(--color-white);
  font-family: var(--font-family-text);
  font-size: 16px;
  word-wrap: break-word;
  white-space: initial;
  width: fit-content;
  padding: 8px 10px 8px 10px;
}
.btn-submit:hover,
a.mybot-previous:hover,
input.mybot-previous:hover {
  font-weight: bold;
  box-shadow: inset 0 0 0 50px var(--color-active-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}
.btn-submit.small,
a.mybot-previous.small,
input.mybot-previous.small {
  font-size:16px;
}
.btn-submit.regular,
a.mybot-previous.regular,
input.mybot-previous.regular {
  font-size: 18px;
}
.btn-submit.highlight,
a.mybot-previous.highlight,
input.mybot-previous.highlight {
  font-family: var(--font-family-text);
  font-weight: bold;
}
.btn-submit.big,
a.mybot-previous.big,
input.mybot-previous.big {
  font-size: 26px;
}
.btn-submit.center,
a.mybot-previous.center,
input.mybot-previous.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

input.btn-green {
  background-color: green;
  border-color: green;
}

input.btn-success{
  font-size: 16px;
}
.btn-success{
  text-align: center;
  padding: 8px 10px 8px 10px;
  border-radius: 5px;
  width: max-content;
  font-size: 16px;
  color: var(--color-white);
  a{
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    color: var(--color-white);
  }
}
.btn-success:hover{
  border: none;
  color: var(--color-white);
  a{
    color: var(--color-white);
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
  }
}
.btn-success-business{
  border: 1px solid var(--color-purple);
  background-color: var(--color-purple);
  color: var(--color-white);

}
.btn-success-business:hover{
  background-color: var(--color-hover-purple);
  color: var(--color-white);
  a{
    text-decoration: none;
  }
}

.btn-success-premium, .btn-success-freemium{
  border: 1px solid var(--color-blue);
  background-color: var(--color-blue);
  color: var(--color-white);

}
.btn-success-premium:hover, .btn-success-freemium:hover{
   box-shadow: inset 0 0 0 50px var(--color-active-blue);
    a{
      color: var(--color-white);
    }
}


input.btn-danger, a.btn-danger {
  color: var(--color-white);
  background-color: var(--color-red);
  border-color: var(--color-red);
  font-size: 16px;
  padding: 10px;

  &:hover {
    color: var(--color-white);
    font-weight: bold;
    background-color: var(--color-red);
    border-color: var(--color-red);
  }
}


input.btn-action, a.btn-action {
  color: var(--color-white);
  background-color: var(--color-teal);
  border-color: #dddddd;
  font-size: 18px;

  &:hover {
    color: var(--color-teal);
    background-color: #fafbfc;
    border-color: rgba(27,31,35,0.5);
  }
}

a.btn-later {
  color: #666666;
  font-weight: normal;
  font-size: 16px;
  text-decoration: underline;

  &:hover {
    color: #666666;
    font-weight: bold;
    text-decoration: underline;
  }
}


a.addaccount{
  margin-top: 20px;
}


input.btn-coupon {
  font-size: 16px;
}