/* #region button */
.gw__button {
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;

    height: 2.5rem;
    min-width: 2.5rem;
    border: 0;
    padding: 0rem 1rem;
    gap: 0.25rem;

    font-family: Nunito;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;

    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.2s;
}

.gw__button.icon-only {
    padding: 0;
}

.gw__button.primary {
    border-radius: 2rem;
    background-color: #95C11F;
    color: #151515;
}

.gw__button.primary:hover {
    background: #83AA1A;
}

.gw__button.secondary {
    border-radius: var(--radius-4, 0.25rem);
    background-color: #E8E8E8;
    color: #003C56;
}

.gw__button.secondary .gw__icon {
    background-color: #003C56;
}

.gw__button.secondary:hover {
    background:  #C6C6C6;
}

.gw__button:is(.primary, .secondary):disabled {
    background-color: var(--disabled-300, #C2C2C2);
    color: var(--disabled-700, #4C4C4C);
    cursor: not-allowed;
}
/* #endregion */

/* #region checkbox-list */
.gw__checkbox-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
}

.gw__checkbox-list .checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #151515;
    padding: 0.5rem;
    cursor: pointer;
}

.gw__checkbox-list .checkbox-item .checkbox {
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    border-radius: 4px;
    border: 2px solid #4A4A4A;
    outline: 3px solid transparent;
    flex-shrink: 0;
    transition: background-color 0.2s ease-in-out, outline-color 0.2s ease-in-out, border-color 0.3s ease-in-out;
}

.gw__checkbox-list .checkbox-item:hover .checkbox {
    background-color: var(--primary-300, #D6F3FF);
    outline: 3px solid var(--primary-300, #D6F3FF);
}

.gw__checkbox-list .checkbox-item.selected .checkbox {
    background: #003C56;
    border: 2px solid #003C56;
    box-shadow: none;
    background-image: url("/icon/tickbox-tick.svg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}
/* #endregion */

/* #region dropdown */
.gw__dropdown-container {
    width: min(300px, 100%);
    color: var(--neutral-800, #151515);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    font-size: 1rem;
    position: relative;
}

.gw__dropdown-container .input-caption {
    margin-bottom: 0.5rem;
}

.gw__dropdown-container .dropdown {
    --element-gap: .75rem;
    position: relative;
    cursor: pointer;
    display: flex;
    gap: var(--element-gap);
    height: var(--size-40, 2.5rem);
    align-items: center;
    align-self: stretch;
    border-radius: var(--radius-8, 0.5rem);
    border: 1px solid var(--neutral-300, #E8E8E8);
    transition: border-color 0.1s ease-in-out;
    padding-left: var(--element-gap);
}

.gw__dropdown-container .dropdown:hover {
    box-shadow: none;
    border: 1px solid var(--neutral-400, #C6C6C6);
    box-shadow: inset 0 0 0 1px var(--neutral-400, #C6C6C6);
}

.gw__dropdown-container .dropdown:focus {
    box-shadow: none;
    border: 1px solid #003C56;
    color: var(--neutral-800, #151515);
    box-shadow: inset 0 0 0 1px #003C56;
}

.gw__dropdown-container .dropdown .trailing-icon {
    margin: 0.5rem;
    margin-left: 0;
    transition: transform 250ms ease;
    transform-origin: center;
}

.gw__dropdown-container .dropdown .options-container {
    margin: 0;
    margin-top: 0.125rem;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: none;
    z-index: 1000;
    border-radius: var(--radius-8, 0.5rem);
    background: var(--neutral-100, #FFFFFF);
    color: var(--neutral-800, #151515);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
}

.gw__dropdown-container .dropdown .options-container .options {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0.375rem;
    border-radius: var(--radius-8, 0.5rem);
    max-height: 13.125rem;
    overflow-y: auto;
}

.gw__dropdown-container .dropdown .options-container .options li {
    display: flex;
    box-sizing: border-box;
    min-height: var(--size-40, 2.5rem);
    padding: 0.625rem var(--border-8, 0.5rem);
    margin: 0.125rem 0;
    scroll-margin: 0.5rem 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    cursor: pointer;
    border-radius: var(--radius-8, 0.5rem);
    color: var(--neutral-800, #151515);
    white-space: wrap;
}

.gw__dropdown-container .dropdown .options-container .options li:hover {
    background: var(--neutral-300, #E8E8E8);
}

.gw__dropdown-container .dropdown .options-container .options li.selected {
    background: rgba(3, 130, 185, 0.35);
}

.gw__dropdown-container .dropdown .options-container .options::-webkit-scrollbar {
    width: 1rem;
}

.gw__dropdown-container .dropdown .options-container .options::-webkit-scrollbar-thumb {
    background-color: var(--neutral-400, #C6C6C6);
    border-radius: 0.5rem;
    margin: 0 10px;
    width: 0.5rem;
    border: 0.25rem solid #FFFFFF;
}

.gw__dropdown-container .dropdown .options-container .options::-webkit-scrollbar-thumb:hover {
    background-color: var(--neutral-500, #7E7E7E);
}

.gw__dropdown-container .dropdown .options-container .options::-webkit-scrollbar-track {
    background-color: transparent;
    width: 0.75rem;
}

.gw__dropdown-container .dropdown .options-container .options::-webkit-scrollbar-corner {
    background-color: transparent;
}

.gw__dropdown-container .dropdown.open .options-container {
    display: block;
}

.gw__dropdown-container .dropdown.open .trailing-icon {
    transform: rotate(180deg);
}

.gw__dropdown-container .dropdown .selected-option {
    flex: 1;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 0.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.gw__dropdown-container .dropdown .selected-option.placeholder {
    color: var(--neutral-400, #C6C6C6);
}

.gw__dropdown-container .dropdown:not(:has(li)) {
    pointer-events: none;
    border: 1px solid var(--neutral-300, #E8E8E8);
    background-color: #F3F3F3;
}
/* #endregion */

/* #region icon */
.gw__icon {
    display: inline-block;
    mask-repeat: no-repeat;
    background-repeat: no-repeat;
    mask-size: contain;
    background-size: contain;
    mask-position: center;
    background-position: center;
    vertical-align: bottom;
    background-color: var(--neutral-800, #151515);
}

.gw__icon.size-16 {
    width: 16px;
    height: 16px;
}

.gw__icon.size-20 {
    width: 20px;
    height: 20px;
}

.gw__icon.size-24 {
    width: 24px;
    height: 24px;
}

.gw__icon.size-32 {
    width: 32px;
    height: 32px;
}

.gw__icon.size-40 {
    width: 40px;
    height: 40px;
}

.gw__icon.size-48 {
    width: 48px;
    height: 48px;
}
/** # bash script to generate this css quickly
    names="new-icon-name"
    sizes="16 20 24 32 40 48"
    weights="400 600"
    for name in $names; do
        for weight in $weights; do
            for size in $sizes; do
                echo ".gw__icon.$name-$weight.size-$size { mask-image: url("/icon/gw/$name-$weight-$size.svg") }"
            done
            echo ""
        done
    done
*/
.gw__icon.calendar-400.size-16 { mask-image: url(/icon/gw/calendar-400-16.svg) }
.gw__icon.calendar-400.size-20 { mask-image: url(/icon/gw/calendar-400-20.svg) }
.gw__icon.calendar-400.size-24 { mask-image: url(/icon/gw/calendar-400-24.svg) }
.gw__icon.calendar-400.size-32 { mask-image: url(/icon/gw/calendar-400-32.svg) }
.gw__icon.calendar-400.size-40 { mask-image: url(/icon/gw/calendar-400-40.svg) }
.gw__icon.calendar-400.size-48 { mask-image: url(/icon/gw/calendar-400-48.svg) }

.gw__icon.calendar-600.size-16 { mask-image: url(/icon/gw/calendar-600-16.svg) }
.gw__icon.calendar-600.size-20 { mask-image: url(/icon/gw/calendar-600-20.svg) }
.gw__icon.calendar-600.size-24 { mask-image: url(/icon/gw/calendar-600-24.svg) }
.gw__icon.calendar-600.size-32 { mask-image: url(/icon/gw/calendar-600-32.svg) }
.gw__icon.calendar-600.size-40 { mask-image: url(/icon/gw/calendar-600-40.svg) }
.gw__icon.calendar-600.size-48 { mask-image: url(/icon/gw/calendar-600-48.svg) }

.gw__icon.clear-400.size-16 { mask-image: url(/icon/gw/clear-400-16.svg) }
.gw__icon.clear-400.size-20 { mask-image: url(/icon/gw/clear-400-20.svg) }
.gw__icon.clear-400.size-24 { mask-image: url(/icon/gw/clear-400-24.svg) }
.gw__icon.clear-400.size-32 { mask-image: url(/icon/gw/clear-400-32.svg) }
.gw__icon.clear-400.size-40 { mask-image: url(/icon/gw/clear-400-40.svg) }
.gw__icon.clear-400.size-48 { mask-image: url(/icon/gw/clear-400-48.svg) }

.gw__icon.clear-600.size-16 { mask-image: url(/icon/gw/clear-600-16.svg) }
.gw__icon.clear-600.size-20 { mask-image: url(/icon/gw/clear-600-20.svg) }
.gw__icon.clear-600.size-24 { mask-image: url(/icon/gw/clear-600-24.svg) }
.gw__icon.clear-600.size-32 { mask-image: url(/icon/gw/clear-600-32.svg) }
.gw__icon.clear-600.size-40 { mask-image: url(/icon/gw/clear-600-40.svg) }
.gw__icon.clear-600.size-48 { mask-image: url(/icon/gw/clear-600-48.svg) }

.gw__icon.close-400.size-16 { mask-image: url(/icon/gw/close-400-16.svg) }
.gw__icon.close-400.size-20 { mask-image: url(/icon/gw/close-400-20.svg) }
.gw__icon.close-400.size-24 { mask-image: url(/icon/gw/close-400-24.svg) }
.gw__icon.close-400.size-32 { mask-image: url(/icon/gw/close-400-32.svg) }
.gw__icon.close-400.size-40 { mask-image: url(/icon/gw/close-400-40.svg) }
.gw__icon.close-400.size-48 { mask-image: url(/icon/gw/close-400-48.svg) }

.gw__icon.close-600.size-16 { mask-image: url(/icon/gw/close-600-16.svg) }
.gw__icon.close-600.size-20 { mask-image: url(/icon/gw/close-600-20.svg) }
.gw__icon.close-600.size-24 { mask-image: url(/icon/gw/close-600-24.svg) }
.gw__icon.close-600.size-32 { mask-image: url(/icon/gw/close-600-32.svg) }
.gw__icon.close-600.size-40 { mask-image: url(/icon/gw/close-600-40.svg) }
.gw__icon.close-600.size-48 { mask-image: url(/icon/gw/close-600-48.svg) }

.gw__icon.delete-400.size-16 { mask-image: url(/icon/gw/delete-400-16.svg) }
.gw__icon.delete-400.size-20 { mask-image: url(/icon/gw/delete-400-20.svg) }
.gw__icon.delete-400.size-24 { mask-image: url(/icon/gw/delete-400-24.svg) }
.gw__icon.delete-400.size-32 { mask-image: url(/icon/gw/delete-400-32.svg) }
.gw__icon.delete-400.size-40 { mask-image: url(/icon/gw/delete-400-40.svg) }
.gw__icon.delete-400.size-48 { mask-image: url(/icon/gw/delete-400-48.svg) }

.gw__icon.delete-600.size-16 { mask-image: url(/icon/gw/delete-600-16.svg) }
.gw__icon.delete-600.size-20 { mask-image: url(/icon/gw/delete-600-20.svg) }
.gw__icon.delete-600.size-24 { mask-image: url(/icon/gw/delete-600-24.svg) }
.gw__icon.delete-600.size-32 { mask-image: url(/icon/gw/delete-600-32.svg) }
.gw__icon.delete-600.size-40 { mask-image: url(/icon/gw/delete-600-40.svg) }
.gw__icon.delete-600.size-48 { mask-image: url(/icon/gw/delete-600-48.svg) }

.gw__icon.down-more-400.size-16 { mask-image: url(/icon/gw/down-more-400-16.svg) }
.gw__icon.down-more-400.size-20 { mask-image: url(/icon/gw/down-more-400-20.svg) }
.gw__icon.down-more-400.size-24 { mask-image: url(/icon/gw/down-more-400-24.svg) }
.gw__icon.down-more-400.size-32 { mask-image: url(/icon/gw/down-more-400-32.svg) }
.gw__icon.down-more-400.size-40 { mask-image: url(/icon/gw/down-more-400-40.svg) }
.gw__icon.down-more-400.size-48 { mask-image: url(/icon/gw/down-more-400-48.svg) }

.gw__icon.down-more-600.size-16 { mask-image: url(/icon/gw/down-more-600-16.svg) }
.gw__icon.down-more-600.size-20 { mask-image: url(/icon/gw/down-more-600-20.svg) }
.gw__icon.down-more-600.size-24 { mask-image: url(/icon/gw/down-more-600-24.svg) }
.gw__icon.down-more-600.size-32 { mask-image: url(/icon/gw/down-more-600-32.svg) }
.gw__icon.down-more-600.size-40 { mask-image: url(/icon/gw/down-more-600-40.svg) }
.gw__icon.down-more-600.size-48 { mask-image: url(/icon/gw/down-more-600-48.svg) }

.gw__icon.panel-landscape-400.size-16 { mask-image: url(/icon/gw/panel-landscape-400-16.svg) }
.gw__icon.panel-landscape-400.size-20 { mask-image: url(/icon/gw/panel-landscape-400-20.svg) }
.gw__icon.panel-landscape-400.size-24 { mask-image: url(/icon/gw/panel-landscape-400-24.svg) }
.gw__icon.panel-landscape-400.size-32 { mask-image: url(/icon/gw/panel-landscape-400-32.svg) }
.gw__icon.panel-landscape-400.size-40 { mask-image: url(/icon/gw/panel-landscape-400-40.svg) }
.gw__icon.panel-landscape-400.size-48 { mask-image: url(/icon/gw/panel-landscape-400-48.svg) }

.gw__icon.panel-landscape-600.size-16 { mask-image: url(/icon/gw/panel-landscape-600-16.svg) }
.gw__icon.panel-landscape-600.size-20 { mask-image: url(/icon/gw/panel-landscape-600-20.svg) }
.gw__icon.panel-landscape-600.size-24 { mask-image: url(/icon/gw/panel-landscape-600-24.svg) }
.gw__icon.panel-landscape-600.size-32 { mask-image: url(/icon/gw/panel-landscape-600-32.svg) }
.gw__icon.panel-landscape-600.size-40 { mask-image: url(/icon/gw/panel-landscape-600-40.svg) }
.gw__icon.panel-landscape-600.size-48 { mask-image: url(/icon/gw/panel-landscape-600-48.svg) }

.gw__icon.panel-portrait-400.size-16 { mask-image: url(/icon/gw/panel-portrait-400-16.svg) }
.gw__icon.panel-portrait-400.size-20 { mask-image: url(/icon/gw/panel-portrait-400-20.svg) }
.gw__icon.panel-portrait-400.size-24 { mask-image: url(/icon/gw/panel-portrait-400-24.svg) }
.gw__icon.panel-portrait-400.size-32 { mask-image: url(/icon/gw/panel-portrait-400-32.svg) }
.gw__icon.panel-portrait-400.size-40 { mask-image: url(/icon/gw/panel-portrait-400-40.svg) }
.gw__icon.panel-portrait-400.size-48 { mask-image: url(/icon/gw/panel-portrait-400-48.svg) }

.gw__icon.panel-portrait-600.size-16 { mask-image: url(/icon/gw/panel-portrait-600-16.svg) }
.gw__icon.panel-portrait-600.size-20 { mask-image: url(/icon/gw/panel-portrait-600-20.svg) }
.gw__icon.panel-portrait-600.size-24 { mask-image: url(/icon/gw/panel-portrait-600-24.svg) }
.gw__icon.panel-portrait-600.size-32 { mask-image: url(/icon/gw/panel-portrait-600-32.svg) }
.gw__icon.panel-portrait-600.size-40 { mask-image: url(/icon/gw/panel-portrait-600-40.svg) }
.gw__icon.panel-portrait-600.size-48 { mask-image: url(/icon/gw/panel-portrait-600-48.svg) }

.gw__icon.refresh-400.size-16 { mask-image: url(/icon/gw/refresh-400-16.svg) }
.gw__icon.refresh-400.size-20 { mask-image: url(/icon/gw/refresh-400-20.svg) }
.gw__icon.refresh-400.size-24 { mask-image: url(/icon/gw/refresh-400-24.svg) }
.gw__icon.refresh-400.size-32 { mask-image: url(/icon/gw/refresh-400-32.svg) }
.gw__icon.refresh-400.size-40 { mask-image: url(/icon/gw/refresh-400-40.svg) }
.gw__icon.refresh-400.size-48 { mask-image: url(/icon/gw/refresh-400-48.svg) }

.gw__icon.refresh-600.size-16 { mask-image: url(/icon/gw/refresh-600-16.svg) }
.gw__icon.refresh-600.size-20 { mask-image: url(/icon/gw/refresh-600-20.svg) }
.gw__icon.refresh-600.size-24 { mask-image: url(/icon/gw/refresh-600-24.svg) }
.gw__icon.refresh-600.size-32 { mask-image: url(/icon/gw/refresh-600-32.svg) }
.gw__icon.refresh-600.size-40 { mask-image: url(/icon/gw/refresh-600-40.svg) }
.gw__icon.refresh-600.size-48 { mask-image: url(/icon/gw/refresh-600-48.svg) }

.gw__icon.tick-400.size-16 { mask-image: url(/icon/gw/tick-400-16.svg) }
.gw__icon.tick-400.size-20 { mask-image: url(/icon/gw/tick-400-20.svg) }
.gw__icon.tick-400.size-24 { mask-image: url(/icon/gw/tick-400-24.svg) }
.gw__icon.tick-400.size-32 { mask-image: url(/icon/gw/tick-400-32.svg) }
.gw__icon.tick-400.size-40 { mask-image: url(/icon/gw/tick-400-40.svg) }
.gw__icon.tick-400.size-48 { mask-image: url(/icon/gw/tick-400-48.svg) }

.gw__icon.tick-600.size-16 { mask-image: url(/icon/gw/tick-600-16.svg) }
.gw__icon.tick-600.size-20 { mask-image: url(/icon/gw/tick-600-20.svg) }
.gw__icon.tick-600.size-24 { mask-image: url(/icon/gw/tick-600-24.svg) }
.gw__icon.tick-600.size-32 { mask-image: url(/icon/gw/tick-600-32.svg) }
.gw__icon.tick-600.size-40 { mask-image: url(/icon/gw/tick-600-40.svg) }
.gw__icon.tick-600.size-48 { mask-image: url(/icon/gw/tick-600-48.svg) }

.gw__icon.tooltip-400.size-16 { mask-image: url(/icon/gw/tooltip-400-16.svg) }
.gw__icon.tooltip-400.size-20 { mask-image: url(/icon/gw/tooltip-400-20.svg) }
.gw__icon.tooltip-400.size-24 { mask-image: url(/icon/gw/tooltip-400-24.svg) }
.gw__icon.tooltip-400.size-32 { mask-image: url(/icon/gw/tooltip-400-32.svg) }
.gw__icon.tooltip-400.size-40 { mask-image: url(/icon/gw/tooltip-400-40.svg) }
.gw__icon.tooltip-400.size-48 { mask-image: url(/icon/gw/tooltip-400-48.svg) }

.gw__icon.tooltip-600.size-16 { mask-image: url(/icon/gw/tooltip-600-16.svg) }
.gw__icon.tooltip-600.size-20 { mask-image: url(/icon/gw/tooltip-600-20.svg) }
.gw__icon.tooltip-600.size-24 { mask-image: url(/icon/gw/tooltip-600-24.svg) }
.gw__icon.tooltip-600.size-32 { mask-image: url(/icon/gw/tooltip-600-32.svg) }
.gw__icon.tooltip-600.size-40 { mask-image: url(/icon/gw/tooltip-600-40.svg) }
.gw__icon.tooltip-600.size-48 { mask-image: url(/icon/gw/tooltip-600-48.svg) }

.gw__icon.up-400.size-16 { mask-image: url(/icon/gw/up-400-16.svg) }
.gw__icon.up-400.size-20 { mask-image: url(/icon/gw/up-400-20.svg) }
.gw__icon.up-400.size-24 { mask-image: url(/icon/gw/up-400-24.svg) }
.gw__icon.up-400.size-32 { mask-image: url(/icon/gw/up-400-32.svg) }
.gw__icon.up-400.size-40 { mask-image: url(/icon/gw/up-400-40.svg) }
.gw__icon.up-400.size-48 { mask-image: url(/icon/gw/up-400-48.svg) }

.gw__icon.up-600.size-16 { mask-image: url(/icon/gw/up-600-16.svg) }
.gw__icon.up-600.size-20 { mask-image: url(/icon/gw/up-600-20.svg) }
.gw__icon.up-600.size-24 { mask-image: url(/icon/gw/up-600-24.svg) }
.gw__icon.up-600.size-32 { mask-image: url(/icon/gw/up-600-32.svg) }
.gw__icon.up-600.size-40 { mask-image: url(/icon/gw/up-600-40.svg) }
.gw__icon.up-600.size-48 { mask-image: url(/icon/gw/up-600-48.svg) }

.gw__icon.zoom-in-400.size-16 { mask-image: url(/icon/gw/zoom-in-400-16.svg) }
.gw__icon.zoom-in-400.size-20 { mask-image: url(/icon/gw/zoom-in-400-20.svg) }
.gw__icon.zoom-in-400.size-24 { mask-image: url(/icon/gw/zoom-in-400-24.svg) }
.gw__icon.zoom-in-400.size-32 { mask-image: url(/icon/gw/zoom-in-400-32.svg) }
.gw__icon.zoom-in-400.size-40 { mask-image: url(/icon/gw/zoom-in-400-40.svg) }
.gw__icon.zoom-in-400.size-48 { mask-image: url(/icon/gw/zoom-in-400-48.svg) }

.gw__icon.zoom-in-600.size-16 { mask-image: url(/icon/gw/zoom-in-600-16.svg) }
.gw__icon.zoom-in-600.size-20 { mask-image: url(/icon/gw/zoom-in-600-20.svg) }
.gw__icon.zoom-in-600.size-24 { mask-image: url(/icon/gw/zoom-in-600-24.svg) }
.gw__icon.zoom-in-600.size-32 { mask-image: url(/icon/gw/zoom-in-600-32.svg) }
.gw__icon.zoom-in-600.size-40 { mask-image: url(/icon/gw/zoom-in-600-40.svg) }
.gw__icon.zoom-in-600.size-48 { mask-image: url(/icon/gw/zoom-in-600-48.svg) }

.gw__icon.zoom-out-400.size-16 { mask-image: url(/icon/gw/zoom-out-400-16.svg) }
.gw__icon.zoom-out-400.size-20 { mask-image: url(/icon/gw/zoom-out-400-20.svg) }
.gw__icon.zoom-out-400.size-24 { mask-image: url(/icon/gw/zoom-out-400-24.svg) }
.gw__icon.zoom-out-400.size-32 { mask-image: url(/icon/gw/zoom-out-400-32.svg) }
.gw__icon.zoom-out-400.size-40 { mask-image: url(/icon/gw/zoom-out-400-40.svg) }
.gw__icon.zoom-out-400.size-48 { mask-image: url(/icon/gw/zoom-out-400-48.svg) }

.gw__icon.zoom-out-600.size-16 { mask-image: url(/icon/gw/zoom-out-600-16.svg) }
.gw__icon.zoom-out-600.size-20 { mask-image: url(/icon/gw/zoom-out-600-20.svg) }
.gw__icon.zoom-out-600.size-24 { mask-image: url(/icon/gw/zoom-out-600-24.svg) }
.gw__icon.zoom-out-600.size-32 { mask-image: url(/icon/gw/zoom-out-600-32.svg) }
.gw__icon.zoom-out-600.size-40 { mask-image: url(/icon/gw/zoom-out-600-40.svg) }
.gw__icon.zoom-out-600.size-48 { mask-image: url(/icon/gw/zoom-out-600-48.svg) }
/* #endregion */

/* #region input */
.gw__input-container {
    width: min(300px, 100%);
    color: var(--neutral-800, #151515);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    font-size: 1rem;
}

.gw__input-container .input-caption {
    margin-bottom: 0.5rem;
}

.gw__input-container .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--size-40, 2.5rem);
    padding: 0 0.5rem;

    border-radius: var(--radius-8, 0.5rem);
    outline: 1px solid #e8e8e8;
    transition: outline-color 0.1s ease-in-out
}

.gw__input-container .input-wrapper .gw__icon:first-child {
    margin-right: 0.25rem;
    flex-shrink: 0;
}

.gw__input-container .input-wrapper .gw__icon:last-child {
    margin-left: 0.25rem;
    flex-shrink: 0;
}

.gw__input-container .input-wrapper:hover {
    outline: 2px solid var(--neutral-400, #C6C6C6);
}

.gw__input-container .input-wrapper:focus-within {
    outline: 2px solid var(--primary-500, #003C56);
}

.gw__input-container .input-wrapper input {
    height: 1.5rem;
    flex: 1;
    padding: 0.5rem 0.25rem;

    font: inherit;
    color: inherit;
    background-color: transparent;
    text-align: left;
    border: 0;
    text-overflow: ellipsis;
    transition: border-color 0.1s ease-in-out;
}

.gw__input-container .input-wrapper input:focus {
    outline: 0;
}

.gw__input-container .input-wrapper input::-webkit-calendar-picker-indicator {
    display: none !important;
}
/* #endregion */

/* #region segmented-button */
.gw__segmented-button-container {
    color: var(--neutral-800, #151515);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    font-size: 1rem;
    position: relative;
}

.gw__segmented-button-container .input-caption {
    margin-bottom: 0.5rem;
}

.gw__segmented-button-container .segmented-button {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 0.25rem;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.75rem;
    border: 1px solid #C6C6C6;
}

.gw__segmented-button-container .segmented-button .segmented-button-item {
    all: unset;
    box-sizing: border-box;
    
    display: flex;
    height: 2rem;
    min-width: 3.75rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 0.5rem;
    color: #000;
    
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    
    touch-action: manipulation;
}

.gw__segmented-button-container .segmented-button .segmented-button-item:disabled {
    color: #C6C6C6;
    cursor: not-allowed;
}

.gw__segmented-button-container .segmented-button .segmented-button-item:not(:disabled):hover {
    background: #F2F2F2;
}

.gw__segmented-button-container .segmented-button .segmented-button-item.selected {
    background: #E8E8E8;
}
/* #endregion */

/* #region toggle-switch */
.gw__toggle-switch {
    display: flex;
    height: 2rem;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    position: relative;
}

.gw__toggle-switch .input-caption {
    color: var(--neutral-800, #151515);
}

.gw__toggle-switch:has(input:disabled) {
    cursor: not-allowed;
}

.gw__toggle-switch input {
    opacity: 0;
    position: absolute;
    z-index: 0;
}

.gw__toggle-switch .switch {
    position: relative;
    width: 2.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 10rem;
    background: var(--neutral-500, #7E7E7E);
    align-items: center;
    z-index: 1;
}

.gw__toggle-switch .switch::before {
    position: absolute;
    content: "";
    height: 1.125rem;
    width: 1.125rem;
    margin: 0.1875rem;
    border-radius: 10rem;
    background-color: var(--neutral-100, #FFFFFF);
    transition: transform cubic-bezier(0, 0, 0.30, 1.25) 0.4s;
    z-index: 2;
}

.gw__toggle-switch input:checked ~ .switch::before {
    transform: translateX(1rem);
}

.gw__toggle-switch input:checked ~ .switch {
    background: var(--primary-500, #003C56);
}

.gw__toggle-switch input:hover:checked ~ .switch::before {
    transform: translateX(calc(1rem - 0.05rem));
    background-color: var(--primary-300, #D6F3FF);
}

.gw__toggle-switch input:hover:checked ~ .switch {
    background: var(--primary-600, #00243C);
}

.gw__toggle-switch input:hover ~ .switch::before {
    transform: translateX(0.05rem);
    background-color: var(--neutral-300, #EAEAEA);
    cursor: pointer;
}

.gw__toggle-switch input:hover ~ .switch {
    background: var(--neutral-600, #4A4A4A);
}

.gw__toggle-switch input:disabled ~ .input-caption {
    color: var(--disabled-500);
}

.gw__toggle-switch input:disabled,
.gw__toggle-switch input:hover:disabled,
.gw__toggle-switch input:hover:checked:disabled {
    cursor: not-allowed;
}

.gw__toggle-switch input:disabled ~ .switch,
.gw__toggle-switch input:disabled:hover:checked ~ .switch {
    cursor: not-allowed;
    background: var(--disabled-700, #4C4C4C);
}

.gw__toggle-switch input:disabled ~ .switch::before,
.gw__toggle-switch input:disabled:hover:checked ~ .switch::before {
    cursor: not-allowed;
    background: var(--disabled-300, #C2C2C2);
}
/* #endregion */