@import "variables";
@import "mixins";
@import "grid.scss";

$acc-menu-bg: transparent !default;
$acc-menu-active-bg: $gray100 !default;
$acc-menu-hover-col: $col-prm !default;

// toto sa enqueuje v inc/enqueue.php
.my-account-section {
  .my-account-navigation {
    .woocommerce-MyAccount-navigation {
      float: none;
      width: 100%;
    }
    nav {
      ul {
        padding: 0;
        border: 2px solid $gray100;
        li {
          list-style: none;
          a {
            width: 100%;
            padding: (1rem * 1.6) (2rem * 1.6);
            display: block;
            border-bottom: 2px solid $gray100;
            color: $gray800;
            text-decoration: none;
            font-weight: $fw-light;
            transition: $trans;
            background-color: $acc-menu-bg;
          }
          &:last-child {
            a {
              border-bottom: none;
            }
          }
          &:hover,
          &.is-active {
            a {
              background: $acc-menu-active-bg;
              transition: $trans-h;
            }
          }
          &:hover {
            a {
              color: $acc-menu-hover-col;
            }
          }
          &.is-active {
            a {
              font-weight: $fw-bold;
              color: $gray800;
            }
          }
        }
      }
    }
    margin-bottom: $space-md;
    @include bp("sm") {
      margin-bottom: (1rem * 1.6);
    }
  }
  .my-account-content {
    margin-bottom: $space-md;
    table {
      border-spacing: 2px;
      &.shop_table {
        border: none;
        thead {
          th,
          td {
            text-transform: uppercase;
            padding: 1.9rem (1rem * 1.6);
          }
        }
        tbody,
        tfoot {
          tr {
            background: $gray100;
            margin-bottom: (1rem * 1.6);
            th,
            td {
              padding: 1.5rem (1rem * 1.6);
              border: none;
            }
          }
        }
      }
    }
    mark {
      background: transparent;
      font-weight: $fw-bold;
    }
    .woocommerce-order-details {
      h2 {
        &.woocommerce-order-details__title {
          margin-top: (2rem * 1.6);
        }
      }
    }
    .woocommerce-Address {
      background: $gray100;
      padding: (1rem * 1.6);
      margin-bottom: (1rem * 1.6);
      width: calc(50% - (0.5rem * 1.6)) !important;
      @include bp("sm") {
        width: 100% !important;
      }
      h3 {
        font-size: $fs-1;
        font-weight: $fw-bold;
        text-transform: uppercase;
        margin-bottom: (1rem * 1.6);
      }
    }
    address {
      background: $gray100;
      border-radius: 0 !important;
      border: none !important;
    }
    form {
      background: unset;
      padding: (2rem * 1.6) (1rem * 1.6) 0;
      h3 {
        font-size: $fs-1;
        font-weight: $fw-bold;
        text-transform: uppercase;
        margin-bottom: (1rem * 1.6);
      }
      legend {
        font-size: $fs-1;
        font-weight: $fw-bold;
        text-transform: uppercase;
        padding: (1rem * 1.6) 0;
      }
      .form-row {
        margin-bottom: (1.5rem * 1.6);

        label[for] {
          @include inplace-label;
        }
      }
      input.input-text,
      textarea,
      select {
        @include input;
      }
      a.button {
        @include button-outline;
        @include button-sm;
      }
      button.button {
        @include button;
        margin: (2rem * 1.6) 0;
        @include bp("sm") {
          margin: 0 0 (0.5rem * 1.6) (0.5rem * 1.6);
        }
      }
    }
    .active-orders,
    .history-orders {
      h2 {
        margin-bottom: 1.5rem;
      }
      .order-item {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 3rem;
        padding-bottom: 3rem;
        border-bottom: 1px solid $gray200;
        &:last-child {
          border-bottom: none;
        }
        .images {
          position: relative;
          flex: 1 0 20%;
          max-width: 20%;
          .product-count {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate(0, -50%);
          }
          img {
            max-width: 45%;
            &:nth-child(n + 3) {
              display: none;
            }
          }
        }
        .order-data {
          flex: 1 0 80%;
          max-width: 80%;
          padding-left: 4rem;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(4, 1fr);
          grid-column-gap: 0px;
          grid-row-gap: 0px;
          align-items: center;
          .order-cell {
            strong {
              min-width: 170px;
              display: inline-block;
            }
            span {
              display: inline-block;
            }
          }
          .order-cell-order-date {
            grid-area: 1 / 1 / 2 / 2;
          }
          .order-cell-order-number {
            grid-area: 2 / 1 / 3 / 2;
          }
          .order-cell-order-total {
            grid-area: 3 / 1 / 4 / 2;
          }
          .order-cell-order-status {
            grid-area: 4 / 1 / 5 / 2;
          }
          .order-cell-order-actions {
            grid-area: 1 / 2 / 5 / 3;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 0px;
            grid-row-gap: 1.5rem;
            .link {
              &:first-child {
                @include button;
                text-align: center;
                grid-area: 1 / 1 / 2 / 3;
              }
              &.cancel {
                grid-area: 2 / 2 / 3 / 3;
                text-align: right;
              }
            }
          }
        }
      }
    }
  }
}
