body {
    background: #FFFFFF;

    #wpcontent {
        padding-left: 0px;
    }
}

// content area --------------------------------------------------------------------------------------------------------
.lp_page {
    min-height: 100%;
}

.lp_pagewrap {
    max-width: ($fs * 88);
    overflow-x: hidden;
    padding: $fs;
    padding-top: 1px;
}

.lp_main_area {
    width: 50%;
    float: left;
    background: #FFFFFF;
}

.lp_side_area {
    background-color: #fafafa;
    width: 40%;
    position: absolute;
    right: 0;
    height: 100%;
}

// tabs ----------------------------------------------------------------------------------------------------------------
.lp_navigation {
    background-color: $background--lightest;
    padding-top: $fs;
    position: relative;
    width: 100%;
    box-shadow: 0 3px 1px rgba(0,0,0,.2);
    z-index: 9;
}

.lp_navigation-tabs {
    @extend %default-list;

    margin-left: $fs--15; // FIXME: this important is required, because of the prefixing with .lp_page in _tags.scss
}

.lp_navigation-tabs__item {
    @extend %default-list;

    display: inline-block;
    margin-left: $fs;
    position: relative;
    text-transform: uppercase;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;

    &:after{
        right: -8px;
        content: "\f140";
        font: normal 20px/1 dashicons;
        bottom: 10px;
        position: absolute;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-decoration: none!important;
        color: $laterpay-menu-background;
        font-size: (2 * $fs);
    }
    &:first-child {
        margin-left: 0;
    }

    &:hover .lp_navigation-tabs__submenu {
        display: inline-block;
        position: absolute;
    }

    &:hover .lp_navigation-tabs__link {
        color: $clickable;

        &:hover {
            color: $clickable--highlight;
        }
    }

    &.lp_is-current {
        background-color: $laterpay-menu-background;
        border: 4px solid $laterpay-menu-background;

        &:after{
            content: none;
        }

        &:hover > .lp_navigation-tabs__link,
        > .lp_navigation-tabs__link {
            color: $purchase-button-text;
            cursor: pointer;
            text-transform: uppercase;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
        }
    }
}

.lp_navigation-tabs__link {
    color: $text--lighter;
    display: block;
    font-size: $fs;
    min-width: ($fs * 7);
    padding: $fs;
    text-align: center;
}

.lp_navigation-tabs__submenu {
    background: $background--lightest;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.21);
    border-radius: 0 0 $border-radius $border-radius;
    display: none;
    margin-top: -3px !important; // FIXME: this important is required, because of the prefixing with .lp_page in _tags.scss
}

.lp_navigation-tabs__item.lp_is-current .lp_navigation-tabs__submenu {
    background: $background;
}

.lp_step_label {
    text-transform: uppercase;
    font-size: $fs;
    font-weight: 800;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;

    .lp_step_span {
        border-bottom: 2px solid #4aa69d;
        padding-bottom: 5px;
        transition: width 2s;
    }
}

.lp_info_div {
    padding: 20px 0;
}
// plugin mode indicator -----------------------------------------------------------------------------------------------
.lp_plugin-mode-indicator {
    position: absolute;
    right: 6%; // leave sufficient space for contextual help link
    top: 10px;

    // LaterPay logo (rendered in pseudo element from icon font)
    &:before {
        float: left;
        font-size: $fs * 4;
        left: -2.75rem;
        line-height: 0;
        position: relative;
        top: 1.8rem;
    }

    .lp_plugin-mode-indicator__title {
        color: $clickable;
        font-size: $fs--2;
        margin: $fs 0 $fs--05;
    }

    &:active,
    &:focus,
    &:hover {

        &:before,
        .lp_plugin-mode-indicator__title,
        i {
            color: $clickable--highlight;
        }
    }

    i {
        color: $clickable;
        font-style: normal;
    }

    .lp_plugin-mode-indicator__text {
        color: $text--lighter;
    }
}


// flash messages ------------------------------------------------------------------------------------------------------
.lp_flash-message {
    box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.55);
    margin: 0;
    @include opacity(0.9);
    position: fixed; // always show flash message at top of screen, even if page is scrolled down
    top: 2.5rem;
    width: 96%;
    z-index: $zindex--overlayed-1;
}


// empty states --------------------------------------------------------------------------------------------------------
.lp_empty-state {
    border: 2px dashed $border--darker;
    border-radius: ($border-radius * 3);
    color: $text--lighter;
    margin: $fs--4 auto;
    max-width: ($fs * 28);
    padding: $fs $fs--15;
    text-align: center;

    h2 {
        color: $text--lighter;
        font-size: $fs--125;
        font-weight: bold;
        margin: $fs--05 0 $fs;
    }

    p:not(:last-child) {
        margin: 0 0 $fs;
    }

    p:last-child {
        margin: 0;
    }
}

a.lp_info_link {
    color: #00aaa2;
    text-decoration: underline;
}

a.lp_info_link_black {
    color: #000000;
    text-decoration: underline;
}


// contextual help -----------------------------------------------------------------------------------------------------
#screen-meta { // WordPress selector
    position: absolute;
    z-index: $zindex--elevated-1;
}

#contextual-help-link-wrap { // WordPress selector
    z-index: $zindex--elevated-2;
}


// Responsiveness ------------------------------------------------------------------------------------------------------
@media (max-width:1279px) {
    .lp_pagewrap {
        padding: 0;
        padding-left: 10px;
    }
    .lp_plugin-mode-indicator {
        right: 9%;
    }
}

@media screen and (max-width: 782px) {
    body{
        #wpcontent {
            padding-left: 0px !important;
        }
    }
}