@use 'apps/dashboard/src/variables' as *;

.checkout {
  display: flex;
  flex-direction: column;
  gap: rhythm(6);
  max-width: calc(rhythm(90) + rhythm(32));
}

h2 {
  margin: 0;
}

.section-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: rhythm(1.5);
  max-width: rhythm(64);
}

.section-title {
  align-items: center;
  display: flex;
  font-size: font-size(l);
  font-weight: $font-weight-bold;
  gap: rhythm(1);

  pa-icon {
    color: $color-primary-regular;
    &.disabled {
      color: $color-dark-stronger;
    }
  }
}

.section-body {
  padding-left: rhythm(4);
}

.customer-form {
  display: flex;
  flex-direction: column;
  gap: rhythm(1.5);
  position: relative;

  .not-company {
    position: absolute;
    top: - rhythm(5);
    right: 0;
  }

  .field-line {
    display: flex;
    gap: rhythm(3);
  }

  .field-block {
    width: 33%;
    &.long {
      width: 69%;
    }
  }

  label {
    margin-bottom: rhythm(1);
  }

  pa-button {
    align-self: flex-start;
    margin-top: rhythm(2);
  }
}

.powered-by {
  align-items: center;
  display: flex;
  gap: rhythm(0.5);
}

.payment-method-form {
  display: flex;
  flex-direction: column;
  gap: rhythm(2);
  max-width: rhythm(64);

  &.hidden {
    height: 0;
    visibility: hidden;
  }

  .card-element {
    background: $color-background-field-regular;
    border: 1px solid $border-color-field-regular;
    padding: rhythm(2) $padding-field-control-left;
    &:hover {
      border-color: $border-color-field-hover;
    }
  }

  .card-error {
    color: $color-secondary-stronger;
  }

  pa-button {
    align-self: flex-start;
    margin-top: rhythm(2);
  }
}

.budget-form {
  app-budget {
    display: block;
    margin-top: rhythm(2);
  }

  .submit {
    margin-top: rhythm(4);
  }
}
