@import '@automattic/color-studio/dist/color-variables.scss';
@import '@wordpress/base-styles/_colors.scss';
@import '@wordpress/base-styles/_variables.scss';
@import '@wordpress/base-styles/_mixins.scss';
@import '@wordpress/base-styles/_breakpoints.scss';
@import '@wordpress/base-styles/_animations.scss';
@import '@wordpress/base-styles/_z-index.scss';
@import '@wordpress/base-styles/_default-custom-properties.scss';
@import 'variables';
@import 'mixins';


.dlw-settings .form-table .readonly td,
.dlw-settings .form-table .readonly .description{
    color: #999;
}
.dlw-settings .form-table .pro-version {
    display: block;
    margin-top: 5px;
}
.dlw-settings .pro-version {
    font-size: 12px;
    font-weight: 600;
}
.promo-wrapper {
    display: flex;
    flex-direction: column;
}
.promo-wrapper p.promo {
    max-width: 900px;
}
.promo-wrapper a.promo {
    max-width: 649px;
}
.protect-promo p.promo {
    margin-bottom: 0;
}
.promo-wrapper img.promo {
    max-width: 649px;
    width: 100%;
}
.barn2-layout__header {
    background: $studio-white;
    box-sizing: border-box;
    width: calc(100% + 20px);
    margin-left: -20px;
    padding-left: 20px;

    .barn2-layout__header-wrapper {
        display: flex;
        align-items: center;
        min-height: $header-height;
        padding-right: 20px;
    }

    @include breakpoint('<782px') {
        flex-flow: row wrap;
        top: $adminbar-height-mobile;
        width: 100%;
    }

    @include breakpoint('782px-960px') {
        width: calc(100% - 36px);
    }

    .barn2-layout__header-breadcrumbs-wrapper {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }

    .barn2-layout__header-heading {
        display: flex !important;
        align-items: center;
        padding: 0;
        flex: 1 auto;
        height: $header-height;
        background: $studio-white;
        font-weight: 600;
        font-size: 14px;
        margin: 0;
    }
}

.folded .barn2-layout__header {
    width: calc(100% - 36px);

    @include breakpoint('<782px') {
        width: 100%;
    }
}

.is-wp-toolbar-disabled .barn2-layout__header {
    top: 0;
}

.has-woocommerce-navigation .barn2-layout__header {
    left: 0;
    width: 100%;
}
.dlw-pro-only {
    font-weight: 600;
    font-size: 12px;
}

// Consistent input and select widths
.dlw-settings .form-table {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    select {
        width: 400px;
        max-width: 100%;
        box-sizing: border-box;
    }

    // Ensure full width on mobile devices
    @include breakpoint('<782px') {
        input[type="text"],
        input[type="number"],
        input[type="email"],
        input[type="url"],
        input[type="password"],
        select {
            width: 100%;
        }
    }
}

.multi-downloads-settings {
    margin-bottom: 2.5rem;
}

.dlw-settings {
    h2 {
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        
        &:first-of-type {
            margin-top: 0;
        }
    }
    
    .form-table + h2 {
        margin-top: 2rem;
    }
}