/* BUTTON BLOCK */

.btn {
  --btn-background: var(--color-primary-100);
  --btn-color: var(--color-white);
  --btn-border-color: transparent;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
  padding: .6em var(--space-16) .7em;
  max-height: 2.5rem;
  text-align: center;
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: var(--leading-md);
  font-weight: 500;
  border-radius: var(--rounded-lg);
  cursor: pointer;
  background-color: var(--btn-background, var(--color-primary-100));
  color: var(--btn-color, var(--color-white));
  border: 1px solid var(--btn-border-color);
}

.btn.font-serif {
  padding-bottom: .65em;
}

.btn[disabled] {
  cursor: not-allowed;
  opacity: .6;
}
.btn--white[disabled] {
  --btn-background: var(--color-white);
  --btn-color: var(--color-grey-700) !important;
  opacity: .6;
}

.btn.active,
.btn[aria-pressed="true"],
input[type="checkbox"]:checked + .btn--primary {
  --btn-background: var(--color-primary-100);
  --btn-border-color: var(--color-primary-100);
  --btn-color: var(--color-white);
}

.btn--primary {
  --btn-background: transparent;
  --btn-border-color: var(--color-primary-10);
  --btn-color: var(--color-primary);
}
.btn--primary.active:hover,
.btn--primary[aria-pressed="true"]:hover {
  --btn-background: var(--color-primary-hover);
  --btn-border-color: var(--color-primary-hover);
}

.btn--secondary {
  --btn-background: var(--color-black-10);
  --btn-border-color: transparent;
  --btn-color: var(--color-black);
}

.btn--black {
  --btn-background: var(--color-black);
  --btn-color: var(--color-white);
}
.btn--black-10 {
  --btn-background: var(--color-black-10);
  --btn-color: var(--color-black);
}

.btn--grey,
.btn--grey-700 {
  --btn-background: var(--color-grey-700);
  --btn-color: var(--color-white);
}

.btn--white {
  --btn-background: var(--color-white);
  --btn-color: var(--color-grey-700);
}
.btn--white-10 {
  --btn-background: var(--color-white-10);
  --btn-color: var(--color-white-80);
}
.btn--white-20 {
  --btn-background: var(--color-white-20);
  --btn-color: var(--color-white-90);
}

.btn--transparent {
  --btn-background: transparent;
  --btn-color: var(--color-white);
}

.btn--outline {
  --btn-border-color: var(--color-white-20);
}

.btn--xs {
  padding: .3rem var(--space-12) .35rem;
  border-radius: var(--rounded-md);
  max-height: var(--space-32);
}
.btn--sm {
  padding: .375rem var(--space-12) .5rem;
  border-radius: var(--rounded-md);
}

.btn--icon {
  --icon-size: 1rem;
  padding: var(--space-16);
}
.btn--icon.btn--sm {
  padding: .375rem;
}

.btn--image {
  --btn-background: var(--color-white);
  --btn-color: var(--color-grey-800);
  --btn-border-color: var(--color-black-10);
  --btn-image-w: 2.5rem;
  overflow: hidden;
  padding-left: calc(var(--space-16) + var(--btn-image-w));
}
.btn--image::before {
  content: '';
  display: inline-block;
  background-image: var(--btn-image);
  background-size: cover;
  background-color: #FAF8F7;
  width: var(--btn-image-w);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.btn--image[aria-pressed="true"] {
  --btn-background: var(--color-primary-10);
  --btn-border-color: var(--color-primary-50);
  --btn-color: var(--color-primary);
}
.btn--image:hover,
.btn--image:active {
  color: var(--color-primary-hover);
}
.btn--image[data-comments]::after {
  content: attr(data-comments) / '('attr(data-comments) ' commentaires)';
  display: grid;
  place-items: center;
  background-image: var(--icon-comment-new);
  background-size: cover;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-white);
  font-size: var(--text-xs);
  margin-left: .25rem;
}
.btn--image[data-comments="1"]::after {
  content: attr(data-comments) / '(1 commentaire)';
}


@media (hover: hover) {
  .btn:hover {
    --btn-background: var(--color-primary-hover);
  }
  .btn--primary:hover {
    --btn-background: var(--color-primary-10);
  }
  .btn--white:hover {
    --btn-background: var(--color-white);
  }
  .btn--white-10:hover {
    --btn-background: var(--color-white-05);
  }
  .btn--white-20:hover {
    --btn-background: var(--color-white-15);
  }
  .btn--black-10:hover {
    --btn-background: var(--color-black-20);
  }
  .btn--grey:hover {
    --btn-background: var(--color-grey-800);
  }
  .btn--secondary:hover {
    --btn-background: var(--color-black-20);
  }
  .btn--transparent:hover {
    --btn-background: var(--color-white-05);
  }
  .btn[aria-pressed="true"]:hover {
    --btn-background: var(--color-primary-hover);
    --btn-border-color: var(--color-primary-hover);
  }
  .btn--image:hover {
    --btn-background: var(--color-primary-10);
  }
  .btn--image[aria-pressed="true"]:hover {
    --btn-background: var(--color-primary-20);
    --btn-border-color: var(--color-primary-50);
    --btn-color: var(--color-primary-100);
  }
}

.btn--dtl {
  order: 9999;
  --btn-background: var(--color-dtl-15);
  --btn-color: var(--color-dtl);
}

.btn.isSubmitting {
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, .75), rgba(0, 0, 0, 1) 50%);
  mask-size: 400% 100%;
  animation: clip-slide 2s infinite cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes clip-slide {
  from { mask-position: right }
  to   { mask-position: left  }
}
