@import "_variables.scss";

fieldset {
  padding: 0;
  border: none;

  ul {
    padding: 0;

    li {
      list-style-type: none;
      margin-bottom: 6px;
    }
  }
}

input[type="radio"] {
  transform: scale(1.25);
  margin-right: 0.5em;
}

select {
  padding: 2px 4px;
  border-color: $border-medium;
  border-radius: 4px;
}

button,
input[type="submit"],
.button {
  display: inline-block;
  border: 1.5px solid var(--dora-primary-dark);
  color: var(--dora-primary-dark);
  background-color: transparent;
  border-radius: 50vh;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1;
  vertical-align: middle;
  margin: 8px 4px;
  padding: 15px 24px;
  transition:
    color 0.15s linear,
    background-color 0.15s linear;
  cursor: pointer;
  text-decoration: none;

  &.secondary {
    font-size: 18px;
    padding: 10px 16px;
  }

  @include media-small {
    font-size: 18px;
    padding: 10px 16px;
  }

  &:disabled {
    border-color: var(--grey-50);
    color: var(--grey-50);
    cursor: default;
  }

  &:hover:not(:disabled) {
    background-color: var(--dora-primary-dark);
    color: $color-text-knockout;
  }

  &.inverted {
    color: var(--dora-primary-light);
    border-color: var(--dora-primary-light);
  }
}

// button.secondary,
// .button.secondary {
//   background-color: $color-text-knockout;
//   color: $color-text-highlight;
//   border: 1px solid $border-light;

//   &:hover {
//     color: $color-text-highlight;
//     background-color: $background-soft;
//   }
// }

::placeholder {
  font-weight: 200;
  color: $color-text-light;
}
