/* =========================================================
   TOE BEANS DESIGN SYSTEM
   REUSABLE COMPONENTS
   ========================================================= */


/* =========================================================
   BUTTONS
   ========================================================= */

.ds-button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    42px;

  padding:
    9px 16px;

  border:
    1px solid
    transparent;

  border-radius:
    11px;

  font-weight:
    800;

  line-height:
    1;

}


.ds-button-primary {

  background:
    var(--ds-primary);

  color:
    #ffffff;

}


.ds-button-primary:hover {

  background:
    var(--ds-primary-dark);

}


.ds-button-secondary {

  border-color:
    var(--ds-border-strong);

  background:
    var(--ds-surface);

  color:
    var(--ds-heading);

}


.ds-button-secondary:hover {

  background:
    var(--ds-surface-alt);

}


.ds-button-danger {

  border-color:
    var(--ds-danger);

  background:
    var(--ds-danger-soft);

  color:
    var(--ds-danger);

}


.ds-button-danger-solid {
  border-color:
    var(--ds-danger-solid);

  background:
    var(--ds-danger-solid);

  color:
    #ffffff;
}


.ds-button-danger-solid:hover {
  border-color:
    var(--ds-danger-solid-dark);

  background:
    var(--ds-danger-solid-dark);

  color:
    #ffffff;
}


.ds-button-success {
  border-color:
    var(--ds-success-solid);

  background:
    var(--ds-success-solid);

  color:
    #ffffff;
}


.ds-button-success:hover {
  border-color:
    var(--ds-success-solid-dark);

  background:
    var(--ds-success-solid-dark);

  color:
    #ffffff;
}

.ds-button:disabled {

  opacity:
    0.50;

  cursor:
    not-allowed;

}


/* =========================================================
   CARDS
   ========================================================= */

.ds-card {

  padding:
    20px;

  border:
    1px solid
    var(--ds-border);

  border-radius:
    var(--ds-radius-lg);

  background:
    var(--ds-surface);

  box-shadow:
    var(--ds-shadow-sm);

}


.ds-card h3 {

  margin:
    0 0 7px;

}


.ds-card p {

  margin:
    0;

  color:
    var(--ds-muted);

}


/* =========================================================
   REMOVABLE SELECTIONS
   ========================================================= */

.ds-selection-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
}

.ds-selection-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: 38px;
  padding: 4px 5px 4px 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-alt);
  color: var(--ds-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.ds-selection-chip > span {
  min-width: 0;
}
/* =========================================================
   BADGES
   ========================================================= */

.ds-badge {

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    25px;

  padding:
    4px 9px;

  border-radius:
    var(--ds-radius-pill);

  font-size:
    12px;

  font-weight:
    800;

}


.ds-badge-success {

  background:
    var(--ds-success-soft);

  color:
    var(--ds-success);

}


.ds-badge-warning {

  background:
    var(--ds-warning-soft);

  color:
    var(--ds-warning);

}


.ds-badge-danger {

  background:
    var(--ds-danger-soft);

  color:
    var(--ds-danger);

}


.ds-badge-neutral {

  background:
    var(--ds-surface-alt);

  color:
    var(--ds-muted);

}


/* =========================================================
   MESSAGES
   ========================================================= */

.ds-message {

  padding:
    13px 15px;

  border:
    1px solid;

  border-radius:
    var(--ds-radius-md);

  font-weight:
    650;

}


.ds-message-success {

  border-color:
    var(--ds-success);

  background:
    var(--ds-success-soft);

  color:
    var(--ds-success);

}


.ds-message-warning {

  border-color:
    var(--ds-warning);

  background:
    var(--ds-warning-soft);

  color:
    var(--ds-warning);

}


.ds-message-error {

  border-color:
    var(--ds-danger);

  background:
    var(--ds-danger-soft);

  color:
    var(--ds-danger);

}


.ds-message-info {

  border-color:
    var(--ds-info);

  background:
    var(--ds-info-soft);

  color:
    var(--ds-info);

}


/* =========================================================
   MODAL CLOSE BUTTON
   ========================================================= */

.ds-modal-close {

  position:
    relative;

  width:
    40px;

  height:
    40px;

  flex:
    0 0 auto;

  border:
    1px solid
    var(--ds-primary);

  border-radius:
    9px;

  background:
    var(--ds-primary);

  color:
    #ffffff;

}


.ds-modal-close::before,
.ds-modal-close::after {

  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    14px;

  height:
    2px;

  border-radius:
    999px;

  background:
    currentColor;

}


.ds-modal-close::before {

  transform:
    translate(-50%, -50%)
    rotate(45deg);

}


.ds-modal-close::after {

  transform:
    translate(-50%, -50%)
    rotate(-45deg);

}


.ds-modal-close:hover {

  background:
    var(--ds-primary-dark);

  border-color:
    var(--ds-primary-dark);

}

/* =========================================================
   COPYABLE TOE BEANS IDS
   ========================================================= */

[data-copy-toe-beans-id]:not([data-copy-toe-beans-id=""]) {
  display: inline-block;
  width: fit-content;
  padding: var(--ds-space-1) var(--ds-space-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-soft);
  color: var(--ds-heading);
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
}

[data-copy-toe-beans-id]:not([data-copy-toe-beans-id=""]):hover {
  border-color: var(--ds-primary-accent);
}

[data-copy-toe-beans-id]:not([data-copy-toe-beans-id=""]):focus-visible {
  border-color: var(--ds-primary-accent);
  outline: 2px solid var(--ds-primary-accent);
  outline-offset: 2px;
}