/* NEON BORDER INPUT FORM */

.stw-input-box {
    --stw-focus-color: var(--stw-gray-1);
    --icon-color-controller: invert(1); /* Control the color of the calendar icon */
    position: relative;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: var(--icon-color-controller);
}

.stw-input-box input,
.stw-input-box select,
.stw-input-box textarea {
    border: 2px solid var(--stw-gray-2) !important;
    border-radius: 5px !important;
    background-color: var(--stw-gray-1) !important;
}

.stw-input-box input:focus,
.stw-input-box select:focus,
.stw-input-box textarea:focus {
    box-shadow: -3px -3px 15px var(--stw-focus-color) !important;
    transition: .3s !important;
    transition-property: box-shadow, border-color !important;
}

.stw-input-box label {
    transition: color 0.1s ease-in-out;
}

.stw-input-box:focus-within label {
    color: var(--stw-gray-2);
    text-shadow: 0 0 5px var(--stw-focus-color), 0 0 10px var(--stw-focus-color), 0 0 15px var(--stw-focus-color), 0 0 20px var(--stw-focus-color);
    filter: brightness(1.2);
}

/* END NEON INPUT BOX */



/* CHECKBOX GEM */


input[type="checkbox"], .stw-gem-checkbox {
    --checked-color: var(--stw-gray-5);
    --checked-color-light: var(--stw-gray-4);
    --checked-shadow: var(--stw-gray-3);
    --checked-shadow-light: var(--stw-gray-2);
    --checkbox-size: 15px;
    appearance: none;
    overflow: hidden;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border-radius: 97% 3% 97% 3% / 3% 97% 3% 97%;
    border: 2px solid var(--stw-grey-color);
    position: relative;
    transition: all 0.2s ease-in-out;
}

input[type="checkbox"]::before, .stw-gem-checkbox::before {
    position: absolute;
    inset: 0;
    content: "";
    font-size: calc(var(--checkbox-size) / 4);
    transition: all 0.2s ease-in-out;
}

input[type="checkbox"]:checked, .stw-gem-checkbox:checked {
    background: linear-gradient(135deg, var(--checked-color-light) 0%, var(--checked-color) 100%);
    border-color: var(--checked-color);
    box-shadow: -5px -5px 30px var(--checked-shadow-light), 5px 5px 30px var(--checked-shadow);
}

input[type="checkbox"]:checked::before, .stw-gem-checkbox:checked::before {
    background: linear-gradient(135deg, var(--checked-color-light) 0%, var(--checked-color) 100%);
}

.stw-gem-checkbox.gem-orange {
    --checked-color: #FF6600;
    --checked-color-light: #FFD43B;
    --checked-shadow: rgba(255, 102, 0, 1);
    --checked-shadow-light: rgba(255, 212, 59, 1);
}

.stw-gem-checkbox.gem-green {
    --checked-color: #00FF66;
    --checked-color-light: #3BFFD4;
    --checked-shadow: rgba(0, 255, 102, 1);
    --checked-shadow-light: rgba(59, 255, 212, 1);
}

.stw-gem-checkbox.gem-blue {
    --checked-color: #0066FF;
    --checked-color-light: #3BD4FF;
    --checked-shadow: rgba(0, 102, 255, 1);
    --checked-shadow-light: rgba(59, 212, 255, 1);
}

.stw-gem-checkbox.gem-purple {
    --checked-color: #f24975;
    --checked-color-light: #f57899; /* Un tono más claro del color base */
    --checked-shadow: rgba(242, 73, 117, 1); /* Color base con opacidad completa */
    --checked-shadow-light: rgba(245, 120, 153, 1); /* Un tono más claro con opacidad completa */
}

.stw-gem-checkbox.gem-dark-purple {
    --checked-color: #8f5fc7; /* Un morado más oscuro */
    --checked-color-light: #b798f1; /* Un tono más claro del color base */
    --checked-shadow: rgba(143, 95, 199, 1); /* Color base con opacidad completa */
    --checked-shadow-light: rgba(183, 152, 241, 1); /* Un tono más claro con opacidad completa */
}

.stw-gem-checkbox.gem-red {
    --checked-color: #b2263a; /* Un rojo más oscuro y ligeramente morado */
    --checked-color-light: #d94a5e; /* Un tono más claro del mismo color */
    --checked-shadow: rgba(178, 38, 58, 1); /* Sombra acorde al color principal */
    --checked-shadow-light: rgba(217, 74, 94, 1); /* Sombra acorde al color claro */
}

.stw-gem-checkbox.gem-gold {
    --checked-color: #d4af37; /* Oro */
    --checked-color-light: #ffd700; /* Un tono más claro de oro */
    --checked-shadow: rgba(212, 175, 55, 1); /* Sombra acorde al color principal */
    --checked-shadow-light: rgba(255, 215, 0, 1); /* Sombra acorde al color claro */
}


.stw-gem-checkbox.gem-silver {
    --checked-color: #c0c0c0; /* Plata */
    --checked-color-light: #dcdcdc; /* Un tono más claro de plata */
    --checked-shadow: rgba(192, 192, 192, 1); /* Sombra acorde al color principal */
    --checked-shadow-light: rgba(220, 220, 220, 1); /* Sombra acorde al color claro */
}


.stw-gem-checkbox.gem-bronze {
    --checked-color: #cd7f32; /* Bronce */
    --checked-color-light: #daa520; /* Un tono más claro de bronce */
    --checked-shadow: rgba(205, 127, 50, 1); /* Sombra acorde al color principal */
    --checked-shadow-light: rgba(218, 165, 32, 1); /* Sombra acorde al color claro */
}


/* TO USE THE CHECKBOX AS RADIO BUTTON... */
.stw-gem-checkbox.gem-rounded {
    border-radius: 50%;
}


/* END CHECKBOX */