/* ==========================================
   Sandbox Generator
   ========================================== */

#sandbox-generator {
    margin-top: 30px;
}
#sandbox-generator .sandbox-code-buttons
{
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;

    margin-top: 8px !important;
    margin-bottom: 15px !important;
}

#sandbox-generator #copy-sandbox-code,
#sandbox-generator #import-sandbox-code,
#sandbox-generator #copy-share-link
{
    width: 140px !important;
    height: 40px !important;

    min-width: 140px !important;
    max-width: 140px !important;

    padding: 0 !important;
    margin: 0 !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 40px !important;
    font-family: inherit !important;
    text-transform: uppercase !important;
}


/* ==========================================
   Code-Leiste
   ========================================== */

#sandbox-code
{
    width: 100%;
    flex: 1 1 auto;

    min-height: 124px;

    padding: 12px;

    font-size: 16px;
    line-height: 1.4;

    font-family: monospace;

    resize: vertical;

    overflow-wrap: anywhere;
    word-break: break-all;
    overflow-y: hidden;
    box-sizing: border-box;
}

/* ==========================================
   Tabs
   ========================================== */

.sandbox-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin:15px 0 15px 0;
}

#sandbox-generator .sandbox-tab {
    min-width: 100px;
    flex: 1 1 auto;

    text-align: center;
    cursor: pointer;

    padding: 8px 12px !important;

    font-size: 16px !important;
    line-height: 1.1 !important;
}

#sandbox-generator .sandbox-tab.active ,
#sandbox-generator .sandbox-tab.changed.active {
    background: #379738 !important;

}

/* ==========================================
   Copy Button
   ========================================== */

#copy-sandbox-code,
#import-sandbox-code,
#copy-share-link {
    width: 160px !important;
    height: 44px !important;
    min-width: 160px !important;
    max-width: 160px !important;

    flex: 0 0 160px !important;

    padding: 0 !important;
    margin: 0 !important;

    line-height: 44px !important;
    white-space: nowrap !important;
}

#copy-sandbox-code {
    transition: all 0.2s ease;
}

#copy-sandbox-code.copied,
#copy-share-link.copied {
    background-color: #379738 !important;
    border-color: #379738 !important;
    color: #fff !important;
}
#copy-sandbox-code.copied::before,
#copy-share-link.copied::before {
    content: "✓ ";
}
/* ==========================================
   Buttons & Tabs
   ========================================== */

#sandbox-generator .sandbox-tab,
#copy-sandbox-code,
#import-sandbox-code,
#copy-share-link {
    color: #fff !important;
    background-color: #565656 !important;
    border-color: #565656 !important;
}

#sandbox-generator .sandbox-tab.changed {
    position: relative;
}

#sandbox-generator .sandbox-tab.changed::after {
    content: "";

    position: absolute;
    top: 5px;
    right: 5px;

    width: 16px;
    height: 16px;

    background-color: #ffb400;
    border-radius: 50%;
}

/* Hover */

#sandbox-generator .sandbox-tab:hover {
    background-color: #4f4f4f !important;
    border-color: #4f4f4f !important;
}




/* ==========================================
   Kategorien
   ========================================== */

.sandbox-category {
    display: none;
    margin-top: 15px;
}

.sandbox-category.active {
    display: block;
}

/* ==========================================
   Grid
   ========================================== */

#sandbox-generator .sandbox-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 18px;
}

/* ==========================================
   Optionen
   ========================================== */

#sandbox-generator .sandbox-option {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

#sandbox-generator .sandbox-option label {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 2px;
}

/* ==========================================
   Selects
   ========================================== */

#sandbox-generator select {
    width: 100% !important;
    height: 34px !important;

    font-size: 18px !important;
    font-weight: 500;

    box-sizing: border-box;
}
#sandbox-generator select.changed {
    background: #dfd59a !important;
    border-left: 4px solid #b88a2a;
}

#sandbox-generator h2 {
    margin-bottom:8px;
}
#sandbox-generator .sandbox-category h3 {
    margin-top:30px;
    margin-bottom:16px;
    border-bottom:1px solid #ddd;
    padding-bottom:6px;
}



/* ==========================================
   Tablet
   ========================================== */

@media (max-width: 1200px) {
    #sandbox-generator .sandbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   Smartphone
   ========================================== */

@media (max-width: 768px) {
    #sandbox-generator .sandbox-grid {
        grid-template-columns: 1fr;
    }
}