/*
Account
================================================
Defines the styles for the Shopware 5 user account page.

The my-account page displays a dashboard that shows an overview of the user information, payment methods, billing and shipping information inside panel elements.

It allows the user to directly see and change the important information of their account.
*/

.account--content {
    .unitize-margin(10, 0, 0, 0);
}

.partner-statistic .panel--title {
    .unitize(padding-bottom, 20);
}

.account--content,
.payment_logo_debit,
.account-address--container,
.account-info--container {
    .clearfix();
}

    // Logout success message
.account--logout {
    .logout--headline {
        .unitize(font-size, 24);
        .unitize-margin(10, 0, 20, 0);
    }

    .logout--actions {
        .unitize(margin-bottom, 10);
    }

    .logout-back-to-shop {
        display: block;
    }
}

.account--menu {
    .link--logout {
        font-weight: @font-bold-weight;
        color: @brand-primary;
    }

    .navigation--logout-personalized {
        display: block;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.account--box {
    .unitize-margin(0, 0, 20, 0);
}

.account--password,
.account--email {
    input[type="text"],
    input[type="password"],
    input[type="email"] {
        width: 100%;
    }
}

    // Account teaser text padding
.account--welcome {
    .unitize(margin-bottom, 20);

    .panel--body {
        padding: 0;
    }

    .panel--title {
        .unitize-padding(20, 0);
        margin: 0;
    }

    .panel--actions {
        padding: 0;
    }
}

// Account error message margin
.account--error,
.account--success {
    .unitize-margin(0, 0, 10, 0);
}

.register--error-msg {
    color: @highlight-error;
}

.account--actions {
    .unitize-margin(0, 20, 20, 16);
    .clearfix();
}

// Change Address / Payment method
.account--change-payment {
    &.register--content {
        display: block;
        width: 100%
    }
}

.account--newsletter fieldset {
    border: 0;
    padding: 0;

    input[type="checkbox"] {
        .unitize-margin(0, 10, 0, 0);
    }
}

.account--paging {
    .clearfix();
    .unitize-padding(10, 10);
    display: block;
    background: lighten(@panel-bg, 4%);

    .paging--display {
        float: right;
    }
}

.account--orders-overview {
    border: 1px solid @panel-border;

    p { .unitize(font-size, 14); }

    .orders--table-header {
        display: none;
        background: @panel-table-header-bg;

        .panel--th {
            color: @panel-table-header-color;
        }
    }

    .panel--tr {
        .unitize-padding(10, 0);
    }

    .panel--td {
        .clearfix();
        .unitize-padding(5, 10);
        display: block;
        float: none;
    }

    .column--info-labels,
    .column--info-data {
        width: 50%;
        float: left;
        text-align: left;

    }

    .column--info-data {
        .unitize-padding(5, 10, 0, 0);
    }

    .column--summary-labels,
    .column--summary-data {
        width: 50%;
        float: left;
        text-align: left;
    }

    .column--summary-data {
        .unitize-padding(5, 10, 0, 0);
    }

    .column--label,
    .column--value {
        width: 50%;
        float: left;
    }

    .column--label {
        font-weight: @font-bold-weight;
    }
}

.is--act-partnerStatistic {
    .content-main--inner {
        .unitize-padding(0, 0, 16, 0);
    }

    .account--welcome {
        .unitize-padding(0, 0, 0, 10);
    }

    .listing--actions {
        .unitize-padding(10, 18, 24, 18);
        border-bottom: 1px solid @border-color;
    }

    .date-filter {
        .unitize(font-size, 14);
        .unitize-height(50);
        display: block;
        width: 100%;
    }

    .date-filter--label {
        .unitize-padding(9, 0, 10, 0);
        .unitize-width(40);
        display: block;
        float: left;
    }

    .date-filter--input {
        .unitize-margin(0, 0, 0, 40);
        width: auto;
    }

    .datepicker {
        .unitize(padding-right, 35);
        width: 100%;
        float: left;
    }

    .ui-datepicker-trigger {
        .unitize-width(20);
        .unitize-height(20);
        .unitize-margin(10, 0, 0, -30);
        display: inline;
        border: 0;
        background: transparent;
        text-align: center;
        color: @text-color;
        padding: 0;
    }

    .btn--filter {
        width: 100%;
        text-align: center;
        margin: 0;
    }

    .chart--holder {
        display: none;
    }

    .panel--th,
    .panel--td {
        .unitize-padding(8, 10, 7, 10);
        width:25%;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &:first-child {
            text-align: left;
        }
    }

    .panel--th {
        .unitize-padding(3, 10, 2, 10);
        .unitize(font-size, 12);
        color: @text-color;
    }

    .is--odd {
        .unitize-padding(0, 0, 9, 0);
        border-bottom: 1px solid @border-color;

        .column--price,
        .column--total {
            .unitize-padding(10, 10, 10, 10);
            width:100%;
        }
    }

    .column--label {
        text-align: left;
    }

    .column--value {
        text-align: right;
    }

    .column--label,
    .column--value {
        width: 50%;
        float: left;
    }

    .column--item-sum {
        .column--label {
            .is--block;
        }
    }
}

.order--status-icon {
    .unitize-width(8);
    .unitize-height(8);
    .unitize(top, 8);
    display: inline-block;
    position: relative;

    &.status--0,  //The order has not been processed yet.
    &.status--1,  //The order is in process
    &.status--3,  //Partially completed
    &.status--6 { //The order has been sent in part
        background: @highlight-info;
    }

    &.status--2,  //Completed
    &.status--5,  //Ready for shipping
    &.status--7 { //The order has been sent
        background: @highlight-success;
    }

    &.status--4,  //The order has been cancelled
    &.status--8 { //Clarification needed
        background: @highlight-error;
    }
}

.order--name {
    color: @text-color-dark;
}

.order--details,
.order--price-unit,
.order--current-price {
    display: none;
}

.order--details .panel--tr {
    border-bottom: 1px solid @panel-border;
}

.order--repeat {
    text-align: center;
    background: @gray;
    border-bottom: 1px solid @border-color;
}

.order--actions {
    .is--align-center;
}

.order--user-comments,
.order--shop-comments {
    border-bottom: 1px solid @border-color;
}

.account--downloads {
    border: 1px solid @panel-border;

    p { .unitize(font-size, 14) }

    .downloads--table-header {
        display: none;
    }

    .panel--tr {
        .unitize-padding(10, 0);
    }

    .panel--td {
        .clearfix();
        .unitize-padding(5, 10);
        display: block;
        float: none;
    }
}

.account--password-reset {
    .unitize(margin-top, 10);

    p { margin: 0; }

    .password-reset--input {
        .unitize-margin(0, 0, 30, 0);
        width: 100%;
    }

    .password-reset--link {
        width: 100%;
        margin: 0;

        &:first-child {
            .unitize-margin(0, 0, 10, 0);
        }
    }

    .password-reset--captcha {
        img {
            display: inline;
        }
    }
}

.account--password-new {
    .unitize(margin-top, 10);

    .password-new--input {
        .unitize(margin-bottom, 15);
        width: 100%;
    }

    .password-new--helptext {
        margin-bottom: 0;
    }

    .password-new--submit {
        display: block;
        width: 100%;
    }
}

.account--profile {
    .unitize(margin, 0);
    .unitize(padding-top, 30);

    .profile--email-password-container {
        .clearfix();
    }

    .profile-password--container {
        float: right;
        width: 100%;
    }

    .profile-email--container {
        float: left;
        width: 100%;
    }

    .alert {
        .unitize(margin-bottom, 20);
    }

    .js--loading {
        .unitize-width(18);
        .unitize-height(18);
        .border-radius(100%);
        .unitize-margin(0, 0, 0, 5);
        .unitize(top, 4);
        .animation(keyframe--spin 1s linear infinite);
        border: 2px solid @border-color;
        border-top: 2px solid darken(@border-color, 50%);
        display: inline-block;
        position: relative;
    }

    .panel {
        .unitize(margin-bottom, 20);
    }

    .required-info {
        .unitize(font-size, 14);
    }

    .select-field {
        .unitize(margin-bottom, 10);
        max-width: 100%;
    }

    .profile--field {
        .unitize(margin-bottom, 10);
        width: 100%;
    }

    .profile--zip-city {
        .profile--field-zipcode {
            width: 28%;
            float: left;
        }

        .profile--field-city {
            .clearfix();
            width: 70%;
            float: left;
        }
    }

    .birthday--label {
        .unitize-margin(0, 0, 5, 0);
        display: block;
        font-weight: @font-bold-weight;
    }

    .profile--birthdate {
        .select-field {
            .unitize(margin-bottom, 15);
            max-width: 100%;
            float: left;
        }

        .datepicker {
            .unitize(margin-bottom, 15);
            width: 100%;
            max-width: 100%;
            float: left;
        }

        .profile--birthyear,
        .profile--birthyear.select-field {
            .unitize(margin-right, 0);
        }

    }
}

@media screen and(max-width: @tabletViewportWidth ) {
    .column--info-wrapper {
        .clearfix();
    }
}

@media screen and(min-width: @phoneLandscapeViewportWidth ) {
    .account--password-reset {
        .unitize(margin-top, 10);

        .password-reset--input {
            .unitize-margin(10, 0, 30, 0);
        }

        .password-reset--link {
            .unitize-margin(0, 0, 10, 0);
            width: auto;

            &:first-child {
                .unitize-margin(0, 10, 0, 0);
            }
        }
    }

    .account--password-new .password-new--submit {
        display: inline-block;
        width: auto;
    }

    .account--logout .logout-back-to-shop {
        display: inline-block;
    }
}

@media screen and(min-width: @tabletViewportWidth) {

    .account--content {
        .unitize-margin(30, 0, 0, 0);

        &.is--wide {
            width: 100%;
        }
    }

    .account--password-reset {
        .unitize-margin(20, 0, 0, 0);
    }

    .account--password-new {
        .unitize(margin-top, 20);

        .password-new--input {
            .unitize-width(320);
        }
    }

    .account--menu {
        border: 1px solid @border-color;

        .navigation--headline {
            .panel--title;
            .is--underline;
            border-bottom: 1px solid @border-color;
        }

        .account--menu-container {
            .panel--body;
            .unitize-padding(10, 20);
        }

        .navigation--list {
            padding: 0;
            border: 0 none;
        }

        .navigation--entry {
            margin: 0;
            border: 0 none;
        }

        .navigation--link {
            .unitize-padding(5, 0);

            &.link--logout {
                .unitize-margin(10, 0, 0, 0);
                .unitize-padding(10, 0, 0, 0);
                border-top: 1px solid @border-color;
                font-weight: @font-bold-weight;
                color: @brand-primary;

                [class^="icon--"] {
                    .unitize-margin(0, 5, 0, 0);
                    display: inline-block;
                }

            }
        }
    }

    .account--welcome {
        .panel--title {
            .unitize(@font-size-h1, 16, font-size);
        }
    }

    // Select Address
    .account--orders-overview {
        .orders--table-header {
            display: block;
        }

        .panel--tr {
            padding: 0;
            border-width: 0 0 1px 0;

            &.order--repeat {
                .unitize-padding(20, 20);
            }
        }
        .panel--td {
            .unitize-padding(10, 10);
            display: inline-block;
            float: left;
        }

        .column--label {
            display: none;
        }

        .column--value {
            width: 100%;
            float: none;
        }

        .column--summary-labels,
        .column--summary-data {
            width: 20%;
            text-align: right;
        }

        .column--date,
        .column--id,
        .column--dispatch {
            width: 20%;
        }
        .column--status {
            width: 25%;
        }
        .column--actions {
            width: 15%;

            .btn {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
            }
        }
        .column--name {
            width: 50%;
        }
        .column--quantity {
            width: 10%;
        }
        .column--price {
            width: 20%;
        }
        .column--total {
            width: 20%;
        }
        .column--info-labels {
            width: 20%;
        }
        .column--info-data {
            width: 40%;
        }
    }

    .order--item {
        margin: 0;
    }

    .order--pseudo-price {
        .unitize(font-size, 12);
    }

    .order--download,
    .order--price-unit,
    .order--current-price {
        .is--block;
    }

    .order--download {
        .unitize-margin(10, 0, 0, 0);
    }

    .order--quantity {
        .is--align-center;
    }

    .order--actions,
    .order--price,
    .order--amount {
        .is--align-right;
    }

    .account--downloads {
        .downloads--table-header {
            .is--block;
            background: @panel-table-header-bg;

            .panel--th {
                color: @panel-table-header-color;
            }
        }

        .panel--tr {
            padding: 0;
            border-width: 0 0 1px 0;
        }
        .panel--td {
            .unitize-padding(10, 10);
            display: inline-block;
            float: left;
        }

        .column--date,
        .column--actions {
            width: 20%;
        }
        .column--info {
            width: 60%;
        }
    }

    .column--label {
        display: none;
    }

    .column--date,
    .column--id,
    .column--dispatch {
        width: 20%;
    }

    .column--status {
        width: 25%;
    }

    .column--actions {
        width: 15%;
    }

    .column--name {
        width: 50%;
    }

    .column--quantity {
        width: 10%;
    }

    .column--price {
        width: 20%;
    }

    .column--total {
        width: 20%;
    }

    .column--info-labels {
        width: 20%;
    }

    .column--info-data {
        width: 40%;
    }

    .column--summary {
        width: 20%;
    }

    .account--password-reset {
        .password-reset--input {
            .unitize-width(320);
        }
    }

    // Account error message margin
    .account--error,
    .account--success {
        .unitize-margin(0, 0, 20, 0);
    }

    .is--act-partnerStatistic {
        .content-main--inner {
            .unitize-padding(0, 20, 16, 20);
        }

        .account--welcome {
            .unitize-padding(0, 0, 0, 0);
        }

        .listing--actions {
            .unitize-padding(10, 10, 10, 10);
            .border-radius();
            border: 1px solid @border-color;
            background: @gray-light;
        }

        .date-filter {
            .unitize-padding(0, 10, 0, 10);
            width: 40%;
            float: left;
            height: auto;
        }

        .date-filter--label {
            width:10%;
        }

        .btn--filter {
            width: 20%;
            float: left;
            height:40px;
        }

        .chart--holder {
            .is--align-center;
            .is--block;
            width: 100%;
        }

        .panel--th,
        .panel--td {
            .unitize-padding(10, 10, 10, 10);
        }

        .column--item-sum {
            width: 75% !important;

            .column--label,
            .column--value {
                float: left;
                width: 50%;
            }
        }

        .is--odd {
            border: 0;
            padding: 0;
        }

        .is--odd .column--total {
            width: 25%;
            float: left !important;

            .column--value {
                width:100%;
            }
        }
    }

    .account--profile {
        .unitize(margin, 0);

        .select-field {
            .unitize(margin-bottom, 15);
        }

        .profile--field {
            .unitize(margin-bottom, 15);
        }

        .select-field {
            .unitize(max-width, 290);
        }

        .profile--birthdate {
            .select-field {
                width: 32%;
                margin-right: 2%;
            }
        }
    }
}

@media screen and(min-width: @tabletLandscapeViewportWidth) {

    .account--info,
    .account--billing {
        width: 49%;
        float: left;
    }

    .account--payment,
    .account--shipping {
        width: 49%;
        float: right;
    }

    .account--email,
    .account--password,
    .account--userdata {
        display: none;
    }

    .account--email,
    .account--password,
    .account--userdata,
    .account--newsletter {
        clear: both;
    }

    .account--password-reset {
        .unitize-margin(20, 0, 0, 0);
    }

    .account--info,
    .account--payment {
        .panel--body {
            .unitize-height(120);
        }
    }

    .account--profile {
        .profile-password--container {
            float: right;
            width: 49%;
        }

        .profile-email--container {
            float: left;
            width: 49%;
            margin-right: 2%;
        }
    }
}

@media screen and(min-width: @desktopViewportWidth) {

    .is--act-partnerStatistic {
        .content-main--inner {
            .unitize-padding(0, 45, 45, 45);
        }
    }

    .account--profile {
        .unitize(padding-top, 45);
    }

    .account--content {
        .unitize-margin(45, 0, 0, 0);
    }

    .account--password-reset {
        .unitize-margin(45, 0, 0, 0);
    }

    .account--password-new {
        .unitize(margin-top, 45);
    }

    // Account error message margin
    .account--error,
    .account--success {
        .unitize-margin(0, 0, 20, 0);
    }
}

.partner-statistic {

    .account--welcome {
        margin-bottom: 0;
    }

    .partner-statistic-body {
        .unitize-padding(10, 10);
        .unitize-margin(0, 0, 20, 0);
    }

    .date-filter {
        display: inline-block;
    }

    .date-filter--input {
        .unitize-margin(0, 0, 20, 0);
    }

    .ui-datepicker-trigger{
        .btn();
        .unitize-padding(10,10,9,10);
        .unitize-margin(0, 25, 0, 0);
        .unitize(line-height,20);
    }
}