@import "../../style/normalize.pcss";
@import "../../style/mixin/button.pcss";
@import "../../style/button.pcss";
@import "../../style/mixin/typography.pcss";
@import "../../style/mixin/hover.pcss";
@import "../../style/control.pcss";
@import "../../style/property.pcss";
@import "../../style/link.pcss";

[data-monster-role=control] {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;


    & [data-monster-role=dots] {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding: 0;
        margin: 0 15px 0 0;

        & li {
            list-style: none;
            padding: 0;
            margin: 0 5px 0 0;
            display: flex;
            background-clip: border-box;

            & .is-visible {
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3C/svg%3E");
                background-color: var(--monster-bg-color-primary-4);
                background-repeat: no-repeat no-repeat;
                background-position: center center;
                background-size: cover;

                width: 8px;
                height: 8px;
            }

            & .is-hidden {
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E");
                background-color: var(--monster-bg-color-primary-4);
                background-repeat: no-repeat no-repeat;
                background-position: center center;
                background-size: cover;
                width: 8px;
                height: 8px;
            }

            & :hover, & :focus {
                background-clip: border-box;
            }


        }


    }

    & [data-monster-role=settings-layer] {

        background-color: var(--monster-bg-color-primary-4);
        color: var(--monster-color-primary-4);
        padding: 1rem;
        border-radius: 4px;
        z-index: var(--monster-z-index-popover);
        display: none;

        &.visible {
            display: block;
        }

        & label {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin: 0;
            padding: 0;
            cursor: pointer;

            & input {
                accent-color: var(--monster-bg-color-primary-4);
                margin: 0 0.5rem 0 0;
            }
        }

        & [data-monster-role=settings-popup-list] {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
            grid-gap: 0.1rem 1rem;

        }
    }

    & a[data-monster-role=settings-button] {
        display: flex;
        align-items: center;
        color: var(--monster-color-primary-1);
        background: none;
        white-space: nowrap;

        &:after {
            content: "";
            display: block;
            width: 20px;
            height: 16px;
            margin: 2px 3px 0 5px;
            padding-top: 4px;
            background-color: var(--monster-color-primary-1);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13zM1.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5H5V1H1.5zM10 15V1H6v14h4zm1 0h3.5a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-.5-.5H11v14z' fill='%23000'/%3E%3C/svg%3E");
            mask-size: cover;
        }
    }

    &:hover {
        color: var(--monster-color-primary-1);
    }

    &.hidden {
        display: none;
    }
}

@container datatable (max-width: 300px) {
    [data-monster-role=control] {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.5rem;

        & [data-monster-role="dots"] {
            margin: 0;
        }

    }
}