@import "/UI/Core/Styles/Theme.scss";

ServerInfoPage {
    width: 100%;
    height: 100%;
    align-items: center;
    //justify-content: center;
    padding: 32px;

    .server-info-card {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        padding: 30px 30px;
        min-width: 360px;
        max-width: 1040px;
        max-height: 86vh;
    }

    .server-info-header {
        width: 100%;
        justify-content: center;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
    }

    .server-info-heading {
        @include menu-eyebrow( $color: rgba( 255, 255, 255, 0.72 ), $size: 15px, $tracking: 2.2px );
        text-align: center;
    }
    .server-info-subheading {
        @include menu-eyebrow( $color: rgba( 255, 255, 255, 0.72 ), $size: 15px, $tracking: 2.2px );
        text-align: center;
    }

    .server-info-sections {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        min-height: 0;
        overflow-y: scroll;
        padding-right: 6px;
        align-content: flex-start;
    }

    .info-section {
        min-width: 280px;
        width: 0;
        flex-grow: 1;
        flex-shrink: 1;
        flex-direction: column;
        gap: 8px;
        padding: 12px;
        background-color: rgba( 255, 255, 255, 0.025 );
        border: 1px solid rgba( 255, 255, 255, 0.08 );
        border-radius: 4px;
    }

    .info-section--structured {
        min-width: 320px;
    }

    .info-section--empty {
        min-width: 320px;
    }

    .section-eyebrow {
        @include menu-eyebrow( $color: rgba( 255, 255, 255, 0.62 ), $size: 12px, $tracking: 1.8px );
        padding-bottom: 2px;
    }

    .info-row {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 11px 14px;
        background-color: rgba( 255, 255, 255, 0.03 );
        border: 1px solid rgba( 255, 255, 255, 0.06 );
        border-radius: 4px;
    }

    .info-label {
        @include menu-eyebrow( $color: rgba( 255, 255, 255, 0.56 ), $size: 13px, $tracking: 1.8px );
        flex-shrink: 0;
    }

    .info-value {
        @include menu-copy( $color: rgba( 255, 255, 255, 0.88 ), $size: 15px, $tracking: 0.3px );
        font-family: "Dinish-Regular", "Dinish";
        font-weight: 400;
        text-align: right;
        min-width: 0;
        flex-grow: 1;
    }

    .info-value.value-disabled {
        color: rgba( $warning-orange, 0.92 );
    }

    .info-empty {
        @include menu-copy( $color: rgba( 255, 255, 255, 0.72 ), $size: 15px, $tracking: 0.3px );
        padding: 11px 14px;
        background-color: rgba( 255, 255, 255, 0.03 );
        border: 1px solid rgba( 255, 255, 255, 0.06 );
        border-radius: 4px;
    }
}