:host {
  @apply flex flex-col box-border overflow-scroll;
  height: calc(100vh - 293px);
}

.title {
  @apply text-page-heading font-bold;
}

.info {
  @apply text-2xl mt-1 mb-px-40;
}

.card-customer-orders,
.card-customer-card,
.card-customer-details {
  @apply bg-white rounded-t-card p-4 text-center;

  box-shadow: 0 -2px 24px 0 #dce2e9;
}

a {
  @apply no-underline;
}

.address-wrapper {
  @apply grid flex-col gap-px-2;
}

ui-radio-group {
  @apply grid flex-col gap-px-2;
}

ui-radio-button {
  @apply grid grid-flow-col;
}

.address-row {
  @apply bg-white flex flex-row justify-between p-4 font-bold;
}

.card-customer-orders .title,
.card-customer-card .title {
  @apply text-inactive-customer text-xl;
}

.tags {
  @apply grid grid-flow-col flex-row gap-4 justify-center items-center text-ucla-blue font-bold text-regular mb-px-40;
}

.tag {
  @apply grid grid-flow-col items-center gap-2;
}

.details {
  @apply grid flex-col text-regular gap-4;

  .detail {
    @apply grid grid-flow-col justify-items-start flex-row gap-8;
    grid-template-columns: max-content;

    .name {
    }

    .value {
      @apply font-bold;
    }

    .grow {
      @apply flex-grow;
    }

    .edit-details {
      @apply justify-self-end text-card-sub bg-transparent text-brand border-none font-bold rounded-full pr-0 no-underline;
    }
  }
}

ui-inline-input {
  @apply my-px;
}

.card-section-title {
  @apply bg-white flex flex-row justify-between p-4 items-center pt-px-40 pb-px-20;

  h3 {
    @apply m-0 text-card-sub font-bold;
  }
}

.button-add-address,
.button-edit-address {
  @apply p-0 text-card-sub bg-transparent text-brand border-none font-bold no-underline;
}

.card-customer-footer {
  @apply p-4 py-px-25 sticky bottom-0 text-center rounded-b-card mt-px-2;

  button.cta-to-cart {
    @apply px-px-20 py-px-15 text-card-sub bg-brand text-white border-none font-bold rounded-full;

    &:disabled {
      @apply bg-inactive-branch;
    }
  }
}

.header-container {
  @apply relative;
}

.button-customer-history {
  @apply text-card-sub bg-transparent text-brand border-none font-bold rounded-full absolute right-0 top-0 py-px-5;
}

input[type='radio'] {
  @apply text-cta-l;
}
