.seui-option-view {
    display: flex;
    width: auto;
    flex-direction: row;
    align-items: center !important;
    position: relative;
    border-radius: 4px;
    line-height: normal;
    padding: 5px;
    gap: 7px;
    transition: all 180ms;

    background-color: var(--seui-transparent-color);
    border: solid 1px var(--seui-transparent-color);
}

.seui-option-view.checked {
    background-color: var(--seui-chkbox-checked-background-color);
    border-color: var(--seui-chkbox-checked-border-color);
}

.seui-option-view > input {
    display: none;
}

.seui-option-view > label {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 7px;
    font-family: var(--seui-view-text-style);
    font-size: var(--seui-view-text-size);
    color: var(--seui-view-text-color);
    align-items: center;
}

.seui-option-view.multiple > label::before {
    content: "";
    display: block;
    width: 17px;
    min-width: 17px;
    height: 17px;
    min-height: 17px;
    background: var(--seui-chkbox-background-color);
    border: 1px solid var(--seui-chkbox-border-color);
    border-radius: 0.2em;
    -webkit-transition: all 200ms, background 200ms ease-in-out;
    transition: all 200ms, background 200ms ease-in-out;
}

.seui-option-view.multiple.checked > label::before {
    color: var(--seui-view-background-color);
    background: var(--seui-chkbox-checked-color) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjE2ODQ3IDEyLjM4MDhDNy43Nzc3OCAxMi43NzIyIDcuMTQzNTMgMTIuNzcyMiA2Ljc1Mjg0IDEyLjM4MDhMMi43NDQ5OCA4LjM2NDlDMi4zNTU0IDcuOTc0NTQgMi4zNTU0IDcuMzQyNDcgMi43NDQ5OCA2Ljk1MjFMMy4xNjQ1MiA2LjUzMTczQzMuNTU1MiA2LjE0MDI3IDQuMTg5NDYgNi4xNDAyNyA0LjU4MDE0IDYuNTMxNzNMNi43NTI4NCA4LjcwODc4QzcuMTQzNTIgOS4xMDAyNCA3Ljc3Nzc4IDkuMTAwMjQgOC4xNjg0NiA4LjcwODc4TDEyLjI0OTggNC42MTkyM0MxMi42NDA1IDQuMjI3NzcgMTMuMjc0OCA0LjIyNzc3IDEzLjY2NTUgNC42MTkyM0wxNC4wODUgNS4wMzk2QzE0LjQ3NDYgNS40Mjk5NyAxNC40NzQ2IDYuMDYyMDQgMTQuMDg1IDYuNDUyNEw4LjE2ODQ3IDEyLjM4MDhaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K) 50% 40% no-repeat;
    border: 1px solid var(--seui-chkbox-checked-color);
}

.seui-option-view > label > div,
.seui-option-view > label > div div {
    width: 100%;
    /* height: 100%; */

    /* display: flex; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seui-option-view > label.align-horizontal-left > div {
    justify-content: flex-start;
}

.seui-option-view > label.align-horizontal-center > div {
    justify-content: center;
}

.seui-option-view > label.align-horizontal-right > div {
    justify-content: flex-end;
}

.seui-option-view > label.align-vertical-left > div {
    align-items: flex-start;
}

.seui-option-view > label.align-vertical-center > div {
    align-items: center;
}

.seui-option-view > label.align-vertical-right > div {
    align-items: flex-end;
}

.seui-option-view.hide {
    display: none;
}

.seui-option-view.highlight {
    background-color: var(--seui-chkbox-hover-background-color);
    border-color: var(--seui-chkbox-hover-border-color);
}

.seui-option-view.highlight.checked {
    background-color: var(--seui-chkbox-checked-hover-background-color);
    border-color: var(--seui-chkbox-checked-hover-border-color);
}

.seui-option-view.has-image {
    gap: 10px;
}

.seui-option-view.has-image.image-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.seui-option-view.has-image.image-right {
    flex-direction: row-reverse;
}

.seui-option-view.has-image.image-bottom {
    flex-direction: column-reverse;
}

.seui-option-view .option-image {
    object-fit: cover;
    flex-shrink: 0;
}

.seui-option-view.multiple.has-image > label::before {
    order: -1;
    display: none;
}