select {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid $section-border-color;
    border-radius: 8px;
    color: $secondary-text-color;
    appearance: none;
    transition: all 0.3s ease;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23333'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;

    option {
        background-color: $primary-color;
        ;
        color: $secondary-text-color;
        padding: 28px;
        font-size: 16px;
        cursor: pointer;

        &:hover {
            background-color: $primary-color;
            color: #fff;
            cursor: pointer;
        }
    }

    &:focus {
        border-color: $focus-primary-color;
        box-shadow: 0 0 8px rgba($focus-primary-color, 0.5);
        background-color: #fff;
    }

    &:disabled {
        background-color: $primary-color;
    }

    &.error {
        border-color: $status-closed-color;
        box-shadow: 0 0 8px rgba($status-closed-color, 0.5);
    }
}