:root {
    --oc-active-option-view-left: 0;
    --oc-marker-width: 0;
}

.oc-group-class::-webkit-scrollbar { display: none; }

.oc-group-class {
    display: inline-flex;
    position: relative;
    justify-content: left;
    align-items: center;
    padding: 0.5em 1.2em;
    gap: 3em;
    border: solid 2px black;
    border-radius: 20px;
    max-width: 100%;
    box-sizing: border-box; 
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    user-select: none;
}

.oc-option {
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    font-size: 18px;
}

.oc-active-marker-class {
    position: absolute;
    left: var(--oc-active-option-view-left);
    padding: 0.25em 0.8em;
    width: var(--oc-marker-width);
    height: 1em;
    background: black;
    border-radius: 20px;
    z-index: -1;

    transition: left 0.3s ease-in-out;
}

.oc-option-active {
    color: white;
    transition: color 0.4s ease-in-out;
}

.change-img-elem {
    max-width: 100%;
    height: auto;
}