.ps-page--profile-edd {}

.ps-profile--edd {
  form {
    padding: var(--PADD--MD);
  }

  @if $comp_mode {
    // Billing details form
    #edd_checkout_form_wrap {
      fieldset {
        margin-bottom: var(--PADD--MD);
        padding: 0;
        border: none;
    
        > legend {
          display: block;
          width: 100%;
          margin-bottom: 10px;
          padding-bottom: 10px;
          text-transform: uppercase;
          color: var(--PS-COLOR--TEXT);
          border-bottom: 2px solid var(--DIVIDER);
        }
    
        > p {
          width: 100%;
          margin-bottom: var(--PADD--MD);
    
          > label {
            display: block;
            padding-top: var(--PADD);
            padding-bottom: var(--PADD);
            color: var(--PS-COLOR--TEXT);
    
            + span {
              display: block;
              color: var(--PS-COLOR--TEXT--LIGHT);;
              font-size: 80%;
              margin: 0 0 5px;
            }
          }
        }

        .edd-input {
          --font-size: var(--PS-FONT-SIZE);
          --line-height: var(--PS-LINE-HEIGHT);
          --radius: var(--BORDER-RADIUS--MD);
          width: 100%;
          height: auto;
          padding: var(--PADD);
          background-color: var(--PS-COLOR--APP);
          border: 1px solid var(--DIVIDER);
          box-shadow: inset 0 0 0 1px transparent;
          outline: none;
          border-radius: var(--radius);
          font-size: var(--PS-FONT-SIZE);
        }

        .edd-select {
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          width: 100%;
          height: auto;
          padding: var(--PADD);
          border: 1px solid var(--DIVIDER);
          box-shadow: inset 0 0 0 1px transparent;
          background-color: var(--PS-COLOR--APP);
          background-image: url("data:image/svg+xml,%3Csvg class='ast-arrow-svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='26px' height='16.043px' fill='%234B4F58' viewBox='57 35.171 26 16.043' enable-background='new 57 35.171 26 16.043' xml:space='preserve' %3E%3Cpath d='M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z'%3E%3C/path%3E%3C/svg%3E");
          background-size: .8em;
          background-repeat: no-repeat;
          background-position: 98% 50%;
          font-size: var(--PS-FONT-SIZE);
        }
    
        @include mq($from: desktop) {
          > legend {
            margin-bottom: 15px;
            padding-bottom: 15px;
          }
        }
      }
    }
  }
}

.ps-edd__tabs {
  @include mq($until: 550px) {
    flex-wrap: wrap;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: var(--PADD);
  }

  &.ps-tabs--arrows {
    .ps-tabs__item--active {
      @include mq($until: 550px) {
        &:before,
        &:after {
          display: none;
        }

        > a {
          position: relative;

          &:after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 6px;
            background: #333;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--tabs-icon-color--active);
            border: 2px solid var(--PS-COLOR--APP);
            border-radius: var(--BORDER-RADIUS);
            box-shadow: var(--BOX-SHADOW);
          }
        }
      }
    }
  }
}

.ps-edd__tab {
  @include mq($until: 550px) {
    margin-bottom: 5px;
    border: 1px solid var(--tabs-item-separator);

    &:not(:first-child) {
      border-left: 0;
    }

    &:first-child,
    &:last-child {
      border-radius: 0;
    }

    > a {
      &:first-child,
      &:last-child {
        border-radius: 0;
      }
    }
  }
}

.ps-edd__content {
  .edd-notice {
    padding: 0 var(--PADD);
  }

  .edd-table,
  table[id^="edd"] {
    background-color: var(--COLOR--APP);
    border-radius: var(--BORDER-RADIUS--XL);

    @include mq($until: 550px) {
      margin-top: var(--PADD);
      overflow-x: auto;
      display: block !important;
      width: 100%;
    }
  }

  @if $comp_mode {
    /* EDD table */
    table {
      @include table;
    }
  }
}

.edd-page {
  .edd-table,
  table[id^="edd"] {
    @include mq($until: 550px) {
      margin-top: var(--PADD);
      overflow-x: auto;
      display: block !important;
      width: 100%;
    }
  }
}
