/* =========================================================
   ROOT
========================================================= */

.my-dxf-viewer {
    width: 100%;
    box-sizing: border-box;

    font-family:
        Arial,
        sans-serif;
}


/* =========================================================
   TOOLBAR
========================================================= */

.my-dxf-toolbar {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-bottom: 12px;

    box-sizing: border-box;
}


/* Individual toolbar row */

.dxf-toolbar-row {
    width: 100%;

    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    box-sizing: border-box;
}


/* First row */

.dxf-toolbar-row-top {
    padding-bottom: 2px;
}


/* Second row */

.dxf-toolbar-row-tools {
    padding-top: 2px;
}


/* =========================================================
   FILE BUTTON
========================================================= */

.dxf-file-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    height: 38px;

    padding:
        0 16px;

    border:
        1px solid #5b8f2d;

    border-radius:
        5px;

    background:
        #67a333;

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1;

    cursor:
        pointer;

    box-sizing:
        border-box;

    white-space:
        nowrap;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.dxf-file-button:hover {
    background:
        #588d2a;

    border-color:
        #4d7f24;

    color:
        #ffffff;
}


/* =========================================================
   FILE NAME
========================================================= */

.dxf-file-name {
    display: inline-flex;

    align-items: center;

    height:
        38px;

    min-width:
        150px;

    max-width:
        280px;

    padding:
        0 10px;

    border:
        1px solid #dddddd;

    border-radius:
        5px;

    background:
        #fafafa;

    color:
        #666666;

    font-size:
        13px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    box-sizing:
        border-box;
}


/* =========================================================
   MODEL / LAYOUT SELECT
========================================================= */

#dxf-space-select {
    height:
        38px;

    min-width:
        170px;

    padding:
        0 10px;

    border:
        1px solid #d1d1d1;

    border-radius:
        5px;

    background:
        #ffffff;

    color:
        #333333;

    font-size:
        14px;

    box-sizing:
        border-box;
}


#dxf-space-select:disabled {
    background:
        #f1f1f1;

    color:
        #999999;

    border-color:
        #dedede;
}


/* =========================================================
   NORMAL BUTTONS
========================================================= */

.my-dxf-toolbar button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    height:
        38px;

    padding:
        0 15px;

    border:
        1px solid #5b8f2d;

    border-radius:
        5px;

    background:
        #67a333;

    color:
        #ffffff;

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1;

    white-space:
        nowrap;

    cursor:
        pointer;

    box-sizing:
        border-box;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.my-dxf-toolbar button:hover:not(:disabled) {
    background:
        #588d2a;

    border-color:
        #4d7f24;

    color:
        #ffffff;
}


/* Selected tool */

.my-dxf-toolbar button.active {
    background:
        #416f20;

    border-color:
        #365f18;

    color:
        #ffffff;

    box-shadow:
        inset 0 0 0 1px
        rgba(
            255,
            255,
            255,
            0.18
        );
}


/* =========================================================
   TOOL GROUPS
========================================================= */

.dxf-tool-group {
    display:
        inline-flex;

    align-items:
        stretch;

    gap:
        0;
}


/*
 * Tool button inside group.
 * Rounded only on left side.
 */

.dxf-tool-group > button:first-child {
    border-radius:
        5px 0 0 5px;
}


/*
 * Delete button sticks to tool button.
 */

.dxf-tool-group > .dxf-delete-button {
    border-left:
        0;

    border-radius:
        0 5px 5px 0;
}


/* =========================================================
   DELETE BUTTONS
========================================================= */

.my-dxf-toolbar .dxf-delete-button {
    width:
        38px;

    min-width:
        38px;

    padding:
        0;

    font-size:
        20px;

    font-weight:
        700;

    background:
        #67a333;

    border-color:
        #5b8f2d;

    color:
        #ffffff;
}


.my-dxf-toolbar .dxf-delete-button:hover:not(:disabled) {
    background:
        #588d2a;

    border-color:
        #4d7f24;
}


/* =========================================================
   DISABLED BUTTONS
========================================================= */

.my-dxf-toolbar button:disabled {
    background:
        #ededed;

    border-color:
        #d7d7d7;

    color:
        #aaaaaa;

    cursor:
        not-allowed;

    box-shadow:
        none;
}


/* =========================================================
   STATUS
========================================================= */

#dxf-status {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        38px;

    padding:
        0 6px;

    color:
        #666666;

    font-size:
        13px;

    line-height:
        1.3;
}


/* =========================================================
   VIEWER
========================================================= */

#dxf-viewer-container {
    position:
        relative;

    width:
        100%;

    height:
        800px;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid #dddddd;

    border-radius:
        5px;

    box-sizing:
        border-box;
}


#dxf-canvas {
    display:
        block;

    width:
        100%;

    height:
        100%;

    background:
        #ffffff;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
    .dxf-file-name {
        max-width:
            200px;
    }

    #dxf-space-select {
        min-width:
            140px;
    }
}


@media (max-width: 650px) {
    .dxf-toolbar-row {
        align-items:
            stretch;
    }

    .dxf-file-button,
    .dxf-file-name,
    #dxf-space-select,
    #dxf-fit-button {
        width:
            100%;
    }

    .dxf-file-name {
        max-width:
            none;
    }

    .dxf-toolbar-row-tools {
        gap:
            6px;
    }

    .dxf-tool-group {
        flex:
            1 1 auto;
    }

    .dxf-tool-group > button:first-child {
        flex:
            1 1 auto;
    }

    #dxf-status {
        width:
            100%;
    }

    #dxf-viewer-container {
        height:
            600px;
    }
}