/* =========================================================
   TOE BEANS DESIGN SYSTEM
   SVG ICON SYSTEM

   RULE:
   Interface icons should use SVG rather than Unicode symbols.

   Avoid:
   ×
   ☾
   ☀
   →
   ↪
   ⚙
   ✓
   !

   Use:
   <svg class="ds-icon">...</svg>

   This avoids text-encoding corruption and keeps icons
   visually consistent.
   ========================================================= */


/* =========================================================
   BASE ICON
   ========================================================= */

.ds-icon {

  display:
    inline-block;

  width:
    20px;

  height:
    20px;

  flex:
    0 0 auto;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    2;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  vertical-align:
    middle;

}


/* =========================================================
   ICON SIZES
   ========================================================= */

.ds-icon-xs {

  width:
    14px;

  height:
    14px;

}


.ds-icon-sm {

  width:
    16px;

  height:
    16px;

}


.ds-icon-md {

  width:
    20px;

  height:
    20px;

}


.ds-icon-lg {

  width:
    24px;

  height:
    24px;

}


.ds-icon-xl {

  width:
    32px;

  height:
    32px;

}


/* =========================================================
   ICON-ONLY BUTTON
   ========================================================= */

.ds-icon-button {

  display:
    inline-grid;

  place-items:
    center;

  width:
    40px;

  height:
    40px;

  margin:
    0;

  padding:
    0;

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

  border-radius:
    10px;

  background:
    var(--ds-surface);

  color:
    var(--ds-heading);

  box-shadow:
    none;

  cursor:
    pointer;

}


.ds-icon-button:hover {

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

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

  color:
    var(--ds-primary);

}


/* =========================================================
   COMPACT ICON BUTTON
   ========================================================= */

.ds-icon-button-compact {
  width: 28px;
  height: 28px;
}

.ds-icon-button-compact .ds-icon {
  width: 15px;
  height: 15px;
}
/* =========================================================
   PRIMARY ICON BUTTON
   ========================================================= */

.ds-icon-button-primary {

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

  background:
    var(--ds-primary);

  color:
    #ffffff;

}


.ds-icon-button-primary:hover {

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

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

  color:
    #ffffff;

}


/* =========================================================
   DANGER ICON BUTTON
   ========================================================= */

.ds-icon-button-danger {

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

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

  color:
    var(--ds-danger);

}


/* =========================================================
   ICON WITH TEXT
   ========================================================= */

.ds-icon-label {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

}


/* =========================================================
   ICON DEMO GRID
   ========================================================= */

.ds-icon-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(140px, 1fr)
    );

  gap:
    12px;

}


.ds-icon-example {

  display:
    grid;

  place-items:
    center;

  gap:
    9px;

  min-height:
    110px;

  padding:
    16px;

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

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

  background:
    var(--ds-surface);

  color:
    var(--ds-heading);

}


.ds-icon-example span {

  color:
    var(--ds-muted);

  font-size:
    12px;

  font-weight:
    700;

}


/* =========================================================
   SVG RULES
   ========================================================= */

/*
   Do not hard-code icon colors inside SVG paths unless the
   icon genuinely requires multiple colors.

   Preferred:

   stroke="currentColor"

   or let .ds-icon provide the stroke.

   This allows the same SVG to work automatically in:
   - light mode
   - dark mode
   - buttons
   - danger states
   - navigation
   - account menus
*/

/* TOE BEANS PASSWORD VISIBILITY START */


/* =========================================================
   PASSWORD VISIBILITY COMPONENT
   ========================================================= */

.ds-password-visibility-demo {

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.15fr);

  gap:
    18px;

  margin-top:
    18px;

}


.ds-password-icon-pair {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    12px;

}


.ds-password-demo-field {

  display:
    grid;

  gap:
    7px;

}


.ds-password-demo-field > label {

  color:
    var(--ds-heading);

  font-size:
    14px;

  font-weight:
    750;

}


.ds-password-input-wrap {

  position:
    relative;

}


.ds-password-input-wrap input {

  width:
    100%;

  min-height:
    44px;

  padding:
    10px 52px 10px 12px;

  box-sizing:
    border-box;

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

  border-radius:
    10px;

  outline:
    none;

  background:
    var(--ds-surface);

  color:
    var(--ds-text);

}


.ds-password-input-wrap input:focus {

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

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--ds-primary) 15%,
      transparent
    );

}


.ds-password-toggle {

  position:
    absolute;

  top:
    50%;

  right:
    5px;

  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  margin:
    0;

  padding:
    0;

  border:
    0;

  border-radius:
    8px;

  background:
    transparent;

  color:
    var(--ds-muted);

  box-shadow:
    none;

  transform:
    translateY(-50%);

  cursor:
    pointer;

}


.ds-password-toggle:hover,
.ds-password-toggle:focus-visible {

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

  color:
    var(--ds-primary);

  transform:
    translateY(-50%);

}


.ds-password-toggle svg {

  pointer-events:
    none;

}


.ds-password-eye-off {

  display:
    none;

}


.ds-password-toggle[data-visible="true"]
.ds-password-eye {

  display:
    none;

}


.ds-password-toggle[data-visible="true"]
.ds-password-eye-off {

  display:
    block;

}





/* TOE BEANS PASSWORD VISIBILITY END */