@import '../styles/constants';

$default-border-radius: 3px;

html {
    @extend %background;
}

body {
    position: static;

    width: 100vw;
    height: 100vh;
    margin: 0;

    #base {
        background-color: $artboard-background-color;
    }

    /* RP8 */
    .annotation {
        box-sizing: border-box;
        width: 14px !important;
        height: 14px !important;
        margin: 0;
        padding: 0;

        cursor: help !important;

        & > div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            padding: 3px;

            background-color: $primary-color-blue;
            border: none;
            border-radius: $default-border-radius;

            &:hover {
                background-color: darken($primary-color-blue, 10%);
            }

            & > div {
                width: 100%;
                height: 1px;
                margin: 0;
                padding: 0;

                background-color: $primary-color-white;
                border: none;
            }
        }

        * {
            cursor: help !important;
        }
    }

    /* RP9 */
    .annnote {
        cursor: help !important;

        .annnotelabel {
            margin: 0;

            color: $primary-color-white;

            background-color: $primary-color-blue;
            border-radius: $default-border-radius;
            cursor: help !important;

            &:hover {
                background-color: darken($primary-color-blue, 10%);
            }
        }
    }

    .ui-dialog {
        z-index: $z-index-dialog !important;

        padding: 0 !important;

        border: solid 1px $primary-color-gray !important;
        border-radius: $default-border-radius !important;
        opacity: $ui-opacity;

        * {
            color: $primary-color-gray;
        }
    }

    .ui-dialog-titlebar {
        background-color: $primary-color-gray !important;
        border: none !important;

        button {
            border-radius: $default-border-radius !important;
            outline: none !important;
        }

        .ui-icon-closethick {
            background-color: $primary-color-white;
            border-radius: $default-border-radius;
        }
    }

    .ui-dialog-content {
        padding: 10px !important;

        border-radius: $default-border-radius;
    }

    .ui-button-icon-only {
        .ui-icon {
            top: 0 !important;
            left: 0 !important;
        }
    }

    .ui-corner-all {
        border-radius: 0;
    }
}