.circle-button {
    cursor: pointer;
    padding: 8px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 50%;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    font-size: 18px;
}

.square-button {
    cursor: pointer;
    margin: 3px;
    padding: 9px;
    border: none;
    border-radius: 8px;
}

.view-json-square-button {
    cursor: pointer;
    padding: 5px 8px;
    background-color: transparent;
    border: 1px solid #dddddd;
    border-radius: 50px;
    font-size: 12px;
    color: #202020;
}

.circle-button:focus,
.square-button:focus,
.view-json-square-button:focus {
    outline: none;
}

.default-square-button {
    @extend .square-button;
    background-color: #c6c6c6;
    color: #414141;
    z-index: 20;
    font-size: 18px;
}

.done-square-button {
    @extend .square-button;
    background-color: #888888;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 10px;
    border-radius: 8px;
}

.cancel-square-button {
    @extend .square-button;
    background-color: #c6c6c6;
    color: #414141;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 10px;
    border-radius: 8px;
}

.change-image-square-button {
    @extend .cancel-square-button;
    margin: 0 5px;
}

.delete-square-button {
    @extend .square-button;
    background-color: #888888;
    color: #ffffff;
    font-size: 18px;
}

.confirm-delete-square-button {
    @extend .square-button;
    background-color: #eb7558;
    color: #ffffff;
    font-size: 16px;
}

.cancel-delete-square-button {
    @extend .square-button;
    background-color: #ebebeb;
    color: #414141;
    font-size: 16px;
}

.upload-square-button {
    @extend .square-button;
    background-color: #414141;
    color: #ffffff;
    font-size: 14px;
    width: max-content;
}

.start-square-button {
    @extend .square-button;
    background-color: #36beb0;
    color: #ffffff;
    font-size: 14px;
    width: max-content;
}

.button-menu {
    position: relative;
    
     .menu-button-container:hover .menu-container {
        display: flex;
        flex-direction: row;
        position: absolute;
        left: -16px;
        z-index: 10;
        transition: .4s ease .25s;
    }

    .menu-container {
        display: none;
    }

    .menu-links {
        display: flex;
        flex-direction: column;
        position: relative;
        background: white;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    }
      
    .menu-links:after, 
    .menu-links:before {
        content: " ";
        position: absolute;
        bottom: 100%;
        right: 40%;
        border: solid transparent;
        height: 0;
        width: 0;
        pointer-events: none;
    }
      
    .menu-links:after {
        border-bottom-color: #ffffff;
        border-width: 8px;
        right: 42%;
    }
      
    .menu-links:before {
        border-bottom-color: #eaeaea;
        border-width: 9px;
    }
      
    .menu-link {
        text-decoration: none;
        color: #414141;
        font-size: 13px;
        width: max-content;
        min-width: max-content;
        padding: 7px 15px;
        cursor: pointer;
    }

    .menu-link:hover {
        color: #000000;
        font-weight: 700;
    }
}

.default-square-menu-button-layout {
    @extend .button-menu;
    .menu-button-container:hover .menu-container {
        top: 28px;
        left: -55px;
    }
    .default-square-menu-button {
        @extend .default-square-button;
    }
}

.start-square-menu-button-layout {
    @extend .button-menu;
    .menu-button-container:hover .menu-container {
        top: 35px;
        left: 35px;
    }
    .start-square-menu-button {
        @extend .start-square-button;
    }
}

.circle-menu-button-layout {
    @extend .button-menu;
    .menu-button-container:hover .menu-container {
        top: 40px;
    }
    .circle-menu-button {
        @extend .circle-button;
    }
}

.text-menu-button-layout {
    @extend .button-menu;
    .menu-button-container:hover .menu-container {
        top: 18px;
    }
}

.button-group {
    margin: 0 3px 0 3px;

    .button-group-item {
        background-color: #ffffff;
        border: 1px solid #dddddd;
        color: #202020;
        padding: 5px;
        vertical-align: middle;
        cursor: pointer;

        .button-group-icon {
            font-size: 18px;
        }
    }
    
    .button-group-item:after {
        content: "";
        clear: both;
        display: content;
    }
    
    .button-group-item:not(:last-child) {
        border-right: none;
    }

    .button-group-item:first-child {
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    .button-group-item:last-child {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }
    
    .button-group-item:hover {
        background-color: #eeeeee;
    }
}