@import url("./icon.css");


body *{
    box-sizing: border-box;
}

[data-ui-surface]{
    position: relative;

    width: 512px;
    height: 512px;
}

[data-ui-surface] > [data-ui-img]{
    position: absolute;
    top: 0px;
    left: 0px;
}

[data-ui-surface] > [data-ui-tools] {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    
}

[data-ui-bar="bottom"]{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    padding-left: 6px;
    padding-right: 6px;
    /* position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%; */
    width: 512px;
    background-color: #002f9929;
}


[data-ui-svg="up"]{
    background-image: url("./svg/arrow-up-s-line.svg");
}

[data-ui-svg="down"]{
    background-image: url("./svg/arrow-down-s-line.svg");
}

[data-instructions]{
    width: 512px;
    padding: 8px;
    background-color: #004eff29;
    font-size: 0.8em;
}