#magic-ex-im {
    .magic-ex-im-wrapper {
        margin-top: 15px;
    }
    select,
    input[type='text'] {
        max-width: 100%;
        width: 100%;
    }
    p {
        transition: opacity 0.2s;
        &.submit {
            display: flex;
            align-items: center;
            column-gap: 5px;
            margin-top: 1em;
        }
    }
    label[for] {
        cursor: pointer;
    }
    .form-field {
        transition: opacity 0.2s;
        p {
            line-height: 1.3;
        }
    }
    .js-processing,
    .js-refreshing {
        pointer-events: none;
        opacity: 0.5;
    }
    .js-processing {
        p.submit:after {
            content: '';
            width: 1.65em;
            aspect-ratio: 1;
            background: url('../assets/loader.svg') center/contain no-repeat;
        }
    }
    #magic-ex-items-cnt-wrapper {
        background-color: #f0f0f1;
        padding: 10px 0;
        position: sticky;
        top: 32px;
        z-index: 3;
        border-bottom: 1px solid currentColor;
        @media (max-width: 782px) {
            top: 46px;
        }
        @media (max-width: 600px) {
            top: 0;
        }
        h4 {
            margin: 0;
        }
    }
    #magic-ex-keys-filters {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 5px;
    }
    #magic-ex-keys-by-group-wrapper {
        row-gap: 5px;
        display: flex;
        flex-wrap: wrap;
    }
    #magic-ex-keys-by-group {
        display: flex;
        flex-wrap: wrap;
        row-gap: 5px;
        column-gap: 15px;
    }
    #magic-ex-advanced-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        &:not(.js-active) {
            display: none;
        }
        #magic-ex-apply-filters {
            flex-shrink: 0;
            position: sticky;
            top: 80px;
        }
    }
    #magic-ex-advanced-filters {
        flex-grow: 1;
        & > *:not(.magic-ex-advanced-filter-type) {
            padding-left: 10px;
        }
    }

    .magic-ex-im {
        &-wrapper {
            display: flex;
            column-gap: 50px;
            & > div {
                width: calc(50% - 25px);
            }
            @media (max-width: 1024px) {
                flex-direction: column;
                & > div {
                    width: 100%;
                }
            }
        }
        &-checkbox {
            display: flex;
            align-items: center;
            input {
                margin: 0;
                &:disabled + label {
                    opacity: 0.6;
                    pointer-events: none;
                }
            }
            label {
                padding-left: 0.5em;
            }
        }
    }
    .magic-ex {
        &-advanced-filter-type {
            @extend .magic-ex-im-checkbox;
            margin: 1.25em 0;
            padding-top: 1.25em;
            border-top: 1px solid lightgray;
            label {
                font-size: 1.075em;
                font-weight: 600;
            }
        }
        &-checkboxes-wrapper {
            display: flex;
            flex-wrap: wrap;
            column-gap: 20px;
            row-gap: 15px;

            #magic-ex-advanced-wrapper .magic-ex-taxes-wrapper & {
                margin-left: 15px;
            }
        }
    }

    .flash {
        animation: flash 1s forwards;
    }

    @keyframes flash {
        from,
        50%,
        to {
            opacity: 1;
        }

        25%,
        75% {
            opacity: 0;
        }
    }
}

#magic-ex-partial-wrapper,
#magic-ex-date-wrapper {
    display: flex;
    white-space: nowrap;
    align-items: center;
    column-gap: 5px;
    input[type='number'] {
        width: 70px;
    }
}

#magic-im-notices {
    margin-top: 25px;
    max-height: 500px;
    overflow-y: auto;
    li {
        margin-bottom: 0.65em;
        &:last-child {
            margin-bottom: 0;
        }
    }
}

#select2-magic-ex-keys-select-results,
#select2-magic-ex-media-keys-select-results {
    padding: 5px;
    column-gap: 5px;
    row-gap: 7px;
    display: flex;
    flex-wrap: wrap;
    li {
        margin: 0;
        border-radius: 3px;
    }
}

.select2 {
    &-container {
        width: 100% !important;
    }
    &-selection--single {
        height: auto !important;
    }

    &-selection__choice,
    &-results__option {
        &.mandatory {
            opacity: 0.6;
            pointer-events: none;
            order: -1;
            .select2-selection__choice__remove {
                display: none;
            }
        }
        code:empty {
            display: none;
        }
    }
    &-results__option[aria-selected='true']:not(
            .select2-results__option--highlighted
        ) {
        background-color: rgba(221, 221, 221, 0.75);
    }
    &-selection__rendered {
        .select2-search--inline,
        .select2-search__field {
            max-width: 100%;
        }
    }
    &-selection__choice {
        margin: 5px 5px 5px 0 !important;
        white-space: normal !important;
        border: none !important;
        min-height: 25px;
        display: inline-flex;
        align-items: center;
        code {
            margin-left: 5px;
        }
        &:has(code) {
            padding-right: 0 !important;
        }
    }
    &-selection--multiple {
        .select2-selection__rendered {
            display: flex !important;
            flex-wrap: wrap;
        }
        .select2-selection__choice {
            background-color: rgba(228, 228, 228, 0.75) !important;
        }
    }
}