.component-button {
  padding:0;
  margin:0;
  border:none;
  background-color:transparent;
  cursor:pointer;
  font-family:inherit;
  text-decoration: none;
}
.component-button__content--primary {
  --background-color: black;
  --text-color: white;
  --hover-bg-color: black
}
.component-button__content--primary-white {
  --background-color: white;
  --text-color: black;
  --hover-bg-color: white
}
.component-button__content--secondary {
  --text-color: black;
  --color-outline: black;
  --hover-bg-color: #f0f0f0
}
.component-button__content--secondary-white {
  --text-color: white;
  --color-outline: white;
  --hover-bg-color: #ffffff1a
}
.component-button__content--tertiary {
  --text-color: black;
  --hover-bg-color: transparent;
  text-decoration:underline;
  text-underline-offset:3px
}
.component-button--full-width {
  width:100%
}
.component-button__content {
  position:relative;
  border-radius:8px;
  overflow:hidden
}
.component-button__content:before {
  content:"";
  position:absolute;
  bottom:0;
  left:-100%;
  width:100%;
  height:2px;
  background:rgb(var(--color-brand-red));
  z-index:0
}
.component-button__content[class*=--secondary]:before {
  bottom:1px
}
.component-button__content--tertiary {
  border-radius:0
}
.component-button__content--tertiary:before {
  display:none
}
.component-button:hover .component-button__content:before {
  animation:slide-across .4s forwards
}
.component-button__inner {
  background-color:var(--background-color);
  color:var(--text-color);
  border:1px solid var(--color-outline);
  font-size:1.6rem;
  line-height:2.2rem;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius:8px;
  transition:background-color .2s,color .2s;
  padding:1.6rem 2.4rem
}
.component-button__content--secondary .component-button__inner,
.component-button__content--secondary-white .component-button__inner {
  border:2px solid var(--color-outline)
}
.component-button__content--tertiary .component-button__inner {
  background-color:transparent;
  border:none;
  padding:.4rem 0;
  border-radius:0
}
.component-button__content--tertiary .component-button__inner .component-button__label {
  @apply text-body text-600;
}
.component-button__label-wrapper {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  white-space:nowrap;
  position:relative;
  overflow:hidden
}
.component-button__label,
.component-button__label-secondary {
  transition:transform .3s
}
.component-button__content--tertiary .component-button__label,
.component-button__content--tertiary .component-button__label-secondary {
  transition:none
}
.component-button:hover .component-button__content--tertiary:hover .component-button__label,
.component-button__content--tertiary:hover .component-button__label-secondary {
  transform:none
}
.component-button:hover .component-button__label,
.component-button:hover .component-button__label-secondary {
  transform:translateY(-100%)
}
.component-button__label-secondary {
  transform:translateY(100%) translate(-50%);
  position:absolute;
  left:50%;
  top:0
}
.component-button:hover .component-button__label-secondary {
  transform:translateY(0) translate(-50%)
}
@keyframes slide-across {
  0% {
    left:-100%
  }
  50% {
    left:0%
  }
  to {
    left:100%
  }
}
.car-drawer__delete-selected-btn .component-button__inner {
  border:2px solid rgb(var(--color-brand-red));
  color:rgb(var(--color-brand-red))
}
.component-button__icon {
  display:flex;
  align-items:center;
  justify-content:center
}
.component-button__icon--left {
  margin-right:.8rem
}
.component-button__icon--right {
  margin-left:.8rem
}
.component-button__icon {
  width:2.4rem;
  height:2.4rem
}
.component-button__icon svg {
  width:2.4rem;
  height:2.4rem
}
.component-button__icon .icon-caret {
  width:1.6rem;
  height:1.6rem;
  transform:rotate(-90deg)
}
.component-button.loading .component-button__label-wrapper,
.component-button.loading .component-button__icon {
  visibility:hidden
}
.component-button.loading .component-button__inner {
  position:relative
}
.component-button__loading {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:2.4rem;
  height:2.4rem
}
.component-button__loading.hidden {
  display:none
}
.component-button__loading .path {
  stroke:#fff
}
.component-button__inner:has(.component-button__icon) {
  justify-content:center
}
.component-button__inner:has(.component-button__icon) .component-button__label-wrapper {
  width:auto
}
.component-button__content--tertiary .component-button__icon,
.component-button__content--tertiary .component-button__icon svg {
  width:2rem;
  height:2rem
}
.component-button__icon--small .svg-wrapper svg {
  width:.8rem;
  height:1.4rem
}
.component-button__content--tertiary .component-button__icon--left {
  margin-right:.6rem
}
.component-button__content--tertiary .component-button__icon--right {
  margin-left:.6rem
}
.component-button__content--tertiary-animated .component-button__icon--left,
.component-button__content--tertiary-animated .component-button__icon--right,
.component-button__content--tertiary[data-animated=true] .component-button__icon--left,
.component-button__content--tertiary[data-animated=true] .component-button__icon--right {
  transition:transform .2s ease
}
.component-button__content--tertiary-animated:hover .component-button__icon--left,
.component-button__content--tertiary[data-animated=true]:hover .component-button__icon--left {
  transform:translate(-3px)
}
.component-button__content--tertiary-animated:hover .component-button__icon--right,
.component-button__content--tertiary[data-animated=true]:hover .component-button__icon--right {
  transform:translate(3px)
}
.component-button__inner--loading {
  position:relative
}
.component-button__inner--loading .component-button__label-wrapper {
  opacity:.7
}
/*# sourceMappingURL=/cdn/shop/t/2/assets/component-button.css.map?v=153376006042396235371773045631 */