/****************
***** Form *******
********************/
.formfield.formfield__inline {
  display: flex;
}

.formfield__spacer {
  height: 8px;
}

.formfield {
  margin-top: 15px;

  select {
    appearance: none;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);
    background-position: center right;
    background-repeat: no-repeat;
    border-radius: 2px;
  }

  label {
    font-size: 12.88px;
  }

  .error-label {
    color: var(--sb-color-0, $primary-color);
  }

  input.error, select.error {
    border-color: var(--sb-color-0, $primary-color);
  }

  input,
  textarea,
  select {
    background-color: var(--sb-color-6, $light-background);
    border: 1px solid var(--sb-color-2, $border-color);
    box-shadow: none;
    border-radius: 0;
    font-size: 12px;

    &:focus {
      background-color: var(--sb-color-3, $dark-background);
      border: 1px solid var(--sb-color-2, $border-color);
    }
  }

  select {
    padding: 6px 12px;
    width: 100%;
    height: 40px;
  }

  textarea {
    padding: 12px 16px;
    width: 100%;
    line-height: 24px;
  }

  input[type="text"],
  input[type="email"] {
    height: 40px;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  #information-area {
    #first-name-area,
    #last-name-area,
    #phone-area,
    #email-area {
      width: 100%;
    }
  }
}

/****************
Collapsible optional fields (Company, Notes) — native <details>/<summary>
********************/
.formfield.sbuy-collapsible {
  border: 1px solid var(--sb-color-2, $border-color);
  background: var(--sb-color-6, $light-background);
  padding: 0;

  > .sbuy-collapsible__summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    font-size: 12.88px;
    color: var(--sb-color-4, $heavy-dark);

    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      content: "+";
      font-size: 20px;
      line-height: 1;
      font-weight: 400;
      color: var(--sb-color-0, $primary-color);
      flex-shrink: 0;
    }
  }

  &[open] > .sbuy-collapsible__summary::after {
    content: "\2212"; /* minus sign − */
  }

  .sbuy-collapsible__body {
    padding: 0 14px 14px;

    input,
    textarea {
      margin-top: 4px;
    }
  }
}