@import "~@wordpress/base-styles/variables";
@import "~@wordpress/base-styles/mixins";
@import "~@wordpress/base-styles/breakpoints";

$godaddy-everyday-blue-600: #09757a;
$godaddy-everyday-blue-500: #00a4a6;
$godaddy-everyday-blue-400: #1bdbdb;

// Progress bar colors
$godaddy-color-progress-bar-background: #f4f8fc;
$godaddy-color-progress-bar-foreground: #00a4a6;

div#wpex-eb-container {
    display: flex;
    align-items: center;

    > span {
        display: inline-flex;
        margin: 2px 5px 0 0;
        cursor: pointer;

        > svg {
            fill: var(--wp-admin-theme-color);
        }
    }


    #wpex-expert-banner {
        color: var(--wp-admin-theme-color);
        text-decoration: none;
    }
}

div#wpex-eb-divider {
    border-right:1px solid #D6D6D6;
    height:12px;
    margin:0 1em;
}

@media (max-width: 830px) {
    div#wpex-eb-container {
        display: none;
    }
}

.wpex-eb-tooltip {
    display: none;
    transition: opacity 0.25s;

    // Style handles 6.0 compatibility.
    &.components-popover:not(.is-without-arrow)[data-y-axis="top"] {
        margin-top: 0;
    }

    @include break-medium() {
        display: block;
    }

    &--black {
        .components-popover__content {
            background-color: #2B2B2B;
            color: #fff;
        }
        .components-popover__arrow::before {
            background-color: #2B2B2B;
        }

        .components-popover__triangle-bg {
            fill: #2B2B2B;
        }

        .components-button {
            color: #fff;
        }
    }

    &:not(.is-without-arrow)::before {
        border-color: $godaddy-everyday-blue-500;
    }

    .components-popover__content {
        border-color: $godaddy-everyday-blue-500;
        border-radius: 8px;
        box-shadow: 0 0 18px rgba(17, 17, 17, 0.07), 0 16px 12px rgba(17, 17, 17, 0.1), 0 9px 12px rgba(17, 17, 17, 0.07);
        cursor: pointer;
        padding: 1rem 1.25rem;
        width: 280px;

        .wpex-eb-tooltip__label {
            align-items: center;
            display: inline-flex;
            font-size: 0.8125rem;
            font-weight: 850;
            line-height: 1;
            margin: 0 0 1rem;
            text-transform: uppercase;

            & > svg {
                display: inline-block;
                margin-right: 0.375rem;
            }
        }

        .wpex-eb-tooltip__title {
            font-weight: 500;
            font-size: 1rem;
            line-height: 1.33;
            margin: 0 0 0.5rem;
        }

        .wpex-eb-tooltip__description {
            line-height: 1.43 !important;
            margin-top: 0;
        }

        .wpex-eb-tooltip__button {
            background-color: transparent;
            padding: 0.5em 1em;
            border: 1px solid #8995A9;
            border-radius: 4px;
            transition: all 0.25s;

            &:hover {
                cursor: pointer;
                border-color: #000;
                background-color: #000;
                color: #fff;
            }
        }
    }
}