/* Style the Dropdown Select element */
    select {
        appearance: base-select;
        color: #71717a;
        background-color: #f6f6f6;
        width: 100%;
        margin-bottom: 30px;
        box-sizing: border-box;
        padding: 0.5rem 1rem;
        border: none;   /* 1px solid #e4e4e7; */
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        cursor: pointer;
    }

    select.capsule {
        border-radius: calc(1.5rem - 2px);
    }

    #myTable select {
        margin-bottom: 0px;
        border-radius: 4px;
        padding: 0.5rem 0.25rem 0.5rem 1rem;
    }

    select::picker-icon {
        font-size: 0.7rem;
        margin-right: 0px;
        padding: 0.15rem;
    }

    select#color option {
        line-height: 1rem;
        width: 0.75rem;
        padding: 0px;
        margin: 0.25rem;
        display: inline-flex;

        &::checkmark {
            margin-left: 0.35rem;
        }
    }

    /* Position the content and icon */
    select > button {
        display: flex;
        width: 100%;
        font-family: inherit;
        color: currentColor;
    }

    select > button > svg {
        margin: 0 0 0 auto;
        width: 1.2rem;
        height: 1.2rem;
    }    

    /* Styling the DropdownListBox */
    select::picker(select) {
        appearance: base-select;
        border: 1px solid #e4e4e7;
        padding: 0.25rem;
        margin-top: 0.25rem;
        border-radius: 6px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1);
        cursor: default;
        transition: opacity 225ms ease-in-out, transform 225ms ease-in-out;
        transform-origin: top;
        transform: translateY(0);
        opacity: 1;
        line-height: 2.25rem;
        
        @starting-style {
            transform: translateY(-0.25rem) scale(0.95);
            opacity: 0;
        }
    }

    select.capsule::picker(select) {
        border-radius: calc(1.5rem - 2px);
    }

    select::picker-icon {
        margin-right: 0.25rem;
    }

    /* Enhance focus visibility */
    select:focus-visible {
        outline: 2px solid #a1a1aa;
        outline-offset: -1px;
    }

    select:has(option:not([hidden]):checked) {
        color: #18181b;
    }    

    /* Custom Checkmark
    select option::after {
        content: "";
        width: 1rem;
        height: 1.5rem;
        margin-left: auto;
        opacity: 0;
        background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2318181b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'%3E%3C/path%3E%3C/svg%3E");
    }

    select option:checked::after {
        opacity: 1;
    }    
    */