/**
Logo Card Template
 */

.logo-form {
  &.vertical {
    .form-item {
      margin-bottom: size(30px);

      label {
        display: block;
        padding-bottom: size(10px);
      }

      input[type=text], input[type=tel], input[type=email], input[type=number], textarea {
        width: 100%;
      }

      .combined-input {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: nowrap;

        div {
          &.full {
            &:last-child {
              border-left: 1px solid var(--basic-700);
            }
          }
        }

        .full {
          flex-grow: 1;
        }
      }

      &.has-error {
        input, textarea, logo-combobox {
          border: 1px solid var(--danger-500) !important;
        }
      }

      &.full-width {
        flex-grow: 1;
        margin-right: 0;
        width: 100%;
      }

      &.labeling {
        margin-bottom: 0;
      }
    }

    .form-feedback-base {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      min-height: size(20px);
      font-weight: 700;
      font-size: size(12px);
      line-height: size(16px);
      text-align: left;
      padding-top: size(2px);

      .error {
        color: var(--danger-500);
      }

      .info {
        color: var(--info-500);
      }

      .success {
        color: var(--success-500);
      }

      .warning {
        color: var(--warning-500);
      }
    }

    .form-btns {
      text-align: right;

      button {
        margin-right: size(10px);

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}

.form-cell-inputs {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  label {
    width: size(105px);
  }
}

.form-input-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-grow: 1;

  input {
    margin-right: size(4px);
  }
}

@for $i from 1 through 5 {
  .columned-#{$i} {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;

    .form-item {
      width: calc((100% / #{$i}) - (#{size(15px)} * (#{$i} - 1)));
      margin-right: size(30px);

      &:nth-child(#{$i}n-#{$i}) {
        margin-right: 0;
      }
    }
  }
}
