@use 'common-mixins';

:host {
    height: 100%;
    display: flex;
    flex-direction: column;

    .exclude-pages-input-container {
        background-color: var(--iqser-grey-6);
        padding: 15px 15px 16px 14px;
    }

    .all-caps-label-container {
        padding: 8px 16px;
        border-bottom: 1px solid var(--iqser-separator);
    }

    .ranges {
        overflow: hidden;

        .range {
            padding-left: 17px;
            padding-right: 16px;
            border-bottom: 1px solid var(--iqser-separator);
            transition: background-color 0.2s;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 50px;

            iqser-circle-button {
                display: none;
            }

            &:hover {
                background-color: var(--iqser-grey-8);

                iqser-circle-button {
                    display: initial;
                }
            }
        }

        &.has-scrollbar:hover {
            @include common-mixins.scroll-bar;
            overflow: auto;

            .range {
                padding-right: 5px;
            }
        }
    }

    .no-excluded {
        padding: 50px 16px;
        text-align: center;
        opacity: 0.7;
    }
}
