/* Sliders */

twm-slider {
    column-count: 1;

    display: flex;
    flex-direction: column;

    margin: 0.5em;
}

.slider-label {
    text-align: center;
    margin-bottom: -0.5em;
    width: 100%;
}

.slider-base {
    height: 2.5em;
    display: flex;
    flex-direction: row;
}

.slider-bar-parent {
    position: relative;
    display: flex;

    width: 100%;
    height: 0.5em;
    border: 0.125em solid rgb(var(--theme-color));
    box-sizing: border-box;
    margin-top: 0.75em;
}

.slider-bar {
    position: relative;
    width: 100%;
    height: 100%;
    margin-right: 1.5em;
}

.slider-scroll-left, .slider-scroll-right {
    height: 2.5em;
    margin-top: -0.25em;
    fill: rgb(var(--theme-color));
}

.slider-scroll-left:hover, .slider-scroll-right:hover {
    fill: rgba(var(--theme-color), 0.5);
}


.slider-bar-thumb {
    position: absolute;
    padding: inherit;
    top: -250%;

    fill: rgb(var(--theme-color));
    height: 1.5em;
}

.slider-bar-progress {
    background-color: rgb(var(--theme-color));
    position: absolute;

    height: 100%;
    width: 50%;
}

/* Scrolls */

twm-scroll {
    column-count: 1;

    display: flex;
    flex-direction: column;

    margin: 0.5em;
}

.scroll-label {
    text-align: center;
    margin-bottom: -0.5em;
    width: 100%;
}

.scroll-base {
    height: 2.5em;
    display: flex;
    flex-direction: row;
}

.scroll-input {
    text-align: center;
    width: 100%;
    min-width: 14em;

    height: 2em;

    border: 0.25em solid rgb(var(--theme-color));
    box-sizing: border-box;

    text-transform: capitalize;
}

.scroll-input-editable:hover {
    border: 0.25em solid rgba(var(--theme-color), 0.5);
}

.scroll-input-editable:focus {
    outline: none;
    caret-color: transparent;
    animation: selection-blink 1s step-end infinite;
}

@keyframes selection-blink {
    0% {
        border: 0.25em solid rgba(var(--theme-color), 0.5);
    }
    50% {
        border: 0.25em solid rgb(var(--theme-color));
    }
}

.scroll-scroll-left, .scroll-scroll-right {
    height: 2.5em;
    margin-top: -0.25em;
    fill: rgb(var(--theme-color));
}

.scroll-scroll-left:hover, .scroll-scroll-right:hover {
    fill: rgba(var(--theme-color), 0.5);
}

/* Buttons */

.twm-button {
    text-align: center;
    width: 100%;
    min-width: 14em;

    height: 2em;

    border: 0.25em solid rgb(var(--theme-color));
    box-sizing: border-box;

    margin-bottom: 0.5em;
}

.twm-button:hover {
    border: 0.25em solid rgba(var(--theme-color), 0.5);
}