$icon-size:        ru(2);

.icon-close {
  position: absolute;
  z-index: 1;
  top: -1.375rem;
  right: -.75rem;
  background-size: 100%;
  cursor: pointer;
  width: $icon-size;
  height: $icon-size;

  circle, line, path {
    stroke: color('primary-1');
    transition: stroke 150ms ease-out;
  }
}

.form-wrapper {
  position: relative;
}

.form-border {
  position: relative;
  width: 100%;

  &:before,
  &:after {
    content: '';
    position: absolute;
    height: 4px;
    width: 100%;
    border-top: 4px solid color('secondary-1');
  }


  &:before {
    top: 0;
  }

  &:after {
    bottom: 0;
  }
}

.hr {
  background-color: color('secondary-1');
  height: 6px;
  margin: 0 10px;
  padding: 0;
  border: none;
}

.inner-form {
  padding: ru(1.5) ru(.75);
  background-color: color('primary-2');
}

.form-item {
  margin-bottom: ru(1);
}

.form-button {
  margin-top: ru(.5);
}