/**
 * The following styles get applied in the WordPress admin.
 *
 */
 
// settings page
 .custom-welcome-guide-admin-notices {
    .components-snackbar {
        background-color: rgb(0, 112, 167);
    }
    .dashicons-smiley::before {
        position: relative;
        right: 7px;
    }
}

.custom-welcome-guide-wrapper .components-input-control__container {
    width: auto;
}

.custom-welcome-guide-wrapper .components-base-control__help {
    margin-top: 1em;
}

// guide popup styles
.custom-welcome-guide {
    .post-thumbnail {
        display: flex;
        justify-content: center;
        background-color: #00a0d2;
    }
    img {
        width: 212px;
        height: 212px;
        object-fit: cover;
    }
    .components-guide__footer {
        width:auto;
    }
    .components-modal__header {
        .components-button span {
            display: none;
        }
        .components-button:hover svg {
            fill: #1e1e1e;
        }
    }
}

.edit-post-welcome-guide__heading {
    font-size: 24px;
    line-height: 1.4;
    margin: 16px 0 16px 0;
    padding: 0 32px;
}

.edit-post-welcome-guide__text {
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 24px 0;
    padding: 0 32px;
}

//deprecated guide styles
.custom-deprecated-guide {
    .edit-post-welcome-guide__page {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
    }
    
    .edit-post-welcome-guide__image {
        object-fit: cover;
    }
    
    .edit-post-welcome-guide__image {
        background: #66c6e4;
    }
    
    @media(min-width:600px){
        .edit-post-welcome-guide__page {
            min-height: 300px;
            padding-left: 344px;
        }
        .edit-post-welcome-guide__image {
            position: absolute;
            left: 0;
            top: 50%;
            height: 300px;
            width: 320px;
            margin-top: -150px;
        }
    }
}

@media (min-width: 600px) {
    .custom-welcome-guide {
        width: 312px;
    }
}