// @import './fonts.css';
html,body{
    margin: 0;
    padding: 0;
    text-align: center;
}

$width: 800px;

#pages-manage,#zones-manager,.pages-manage{
    width: $width;
    margin: 0 auto;

    .tip::after{
        content: attr(data-state);
        display: block;
        position: absolute;
        background: #b5b5d5cc;
        border-radius: 5px;
        padding: 4px;
        left: 50%;
        bottom: 0;
        transform: translate(-50%,0);
    }

    .list-item{
        margin: 20px auto;
        border-radius: 5px;
        box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 2px 1px -1px rgba(0,0,0,0.12);
        padding: 20px;
        position: relative;
        font-size: 0.995rem;
        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        font-weight: 400;
        line-height: 1.43;
        letter-spacing: 0.01071em;

        &>.list-header{
            display: flex;
            margin-bottom: 30px;
            align-items: center;
            justify-content: center;
        }

        .title{
            flex-grow: 1;
            padding-left: 2em;
        }
        .title-id{
            color: red;
        }
        .title-edit{
            outline: none;
            border-color: #e9e9e9;
            border-style: solid;
            border-width: 0.5px;
            flex-grow: 1;
            font-size: 1em;
            padding: 0;
            display: none;
            text-align: center;
            margin: 0 3px;
            border-radius: 3px;

            &:focus{
                border-color: #646060;
                border-style: dashed;
            }
            &:hover{
                border-color: rgb(94, 92, 224);
                border-style: solid;
            }
        }
        textarea{
            border-radius: 3px;
            padding: 3px;
            &:focus{
                border-color: #646060;
                border-style: dashed;
            }
            &:hover{
                border-color: rgb(94, 92, 224);
                border-style: solid;
            }            
        }
        .datetime{
            color: #666;
            flex-grow: 1;
        }
        $width-icon: 24px;
        div[name=edit],div[name=save],div[name=preview],div[name=page]{
            margin: 0 12px;
            width: $width-icon;
            height: $width-icon;
            background-size: 100% 100%;

            &:hover{
                cursor: pointer;
            }
        }
        
        $background-image: (
            "edit":"../image/code.svg",
            "save":"../image/ok.svg",
            "preview":"../image/preview.svg",
            "page":"../image/content.svg"
            );
        @each $k,$v in $background-image {
            div[name=#{$k}]{
                background-image: url("#{$v}");
                position: relative;
            }
            div[name=#{$k}]::after{
                content: attr(data-tip);
                display: block;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translate(-50%,120%);
                color: white;
                background: #666;
                border-radius: 3px;
                font-size: 0.8em;
                padding-left: 0.4em;
                padding-right: 0.4em;
                // width: 30px;
            }
        }
        
        .list-body,textarea{
            margin-top: 10px;
        }

        .list-body{
            text-align: left;
            margin-bottom: 10px;

            img{
                width: 100%;
            }
        }

        textarea{
            width: 100%;
            height: 200px;
            font-weight: 300;
            font-size: 16px;
            outline: none;
            border-color: #e9e9e9;

            &::-webkit-scrollbar{
                width: 5px;
            }
            &::-webkit-scrollbar-thumb{
                border-radius: 4px;
                background-color: #c3c3c3;
            }
        }
    }

    .toolbar{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
    }
    .add-item{
        $add-width: 24px;
        background-image: url("../image/add.svg");
        width: $add-width;
        height: $add-width;
        background-size: 100% 100%;

        &:hover{
            cursor: pointer;
        }
    }
}