@use 'abstracts' as *;

*,
*::before,
*::after {
  box-sizing: border-box;
}
img {
  vertical-align: middle;
  max-width: 100%;
  object-fit: contain;
  height: auto;
}

/* Remove default margin */
* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  word-break: break-word;
}

html {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--sans-serif);
  color: var(--text-primary);
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: normal;
}

a {
  text-decoration: none;
  color: var(--primary-color-600);

  &:hover {
    color: var(--primary-color-800);
  }
}

p {
  margin: 0 0 1em 0;
  &:last-child {
    margin: 0;
  }
}

button {
  font-family: var(--sans-serif);
  border: none;
  background: none;
  margin: 0;
  font-size: inherit;
  color: inherit;

  &.a-color {
    color: var(--primary-color);
    cursor: pointer;
  }
}

input,
button,
textarea,
select {
  font: inherit;
}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='number'],
textarea,
.input {
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: 3px;
  padding: 7px;
  min-height: 40px;
  flex-grow: 1;

  &:focus,
  &.mce-edit-focus {
    outline: none;
    border-color: black;
  }
}

select {
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: 3px;
  /* width: 100%; */
  padding: 7px;
  flex: 1;
  -webkit-appearance: none;
  appearance: none;

  &:not([multiple='multiple']) {
    padding-right: 30px;
    background: white right center no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23777777' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E");
    background-position: right 5px center;
    background-size: 15px;
  }

  &:hover,
  &:focus {
    border-color: var(--primary-color);
  }
}

option {
  padding: 0;
  margin: 0;
}

hr {
  border: none;
  border-bottom: 1px solid var(--gray-200-transparent);
}

table {
  border-collapse: collapse;

  th,
  td {
    padding-top: 10px;
    padding-bottom: 10px;

    &:not(:first-child) {
      padding-left: 7px;
    }
    &:not(:last-child) {
      padding-right: 7px;
    }
  }

  th {
    text-align: inherit;
    font-weight: inherit;
    color: var(--gray-700);
  }
}

/* Checkbox / radio */
input[type='checkbox'],
input[type='radio'] {
  /* Use appearence: none to make it a regular, stylable element */
  appearance: none;
  -webkit-appearance: none;

  width: 16px;
  height: 16px;
  box-sizing: content-box;
  padding: 0;
  border: 1px solid var(--gray-800);
  background: white center center no-repeat;
  background-position: -24px;
  background-size: 14px;
  flex-shrink: 0;

  &:hover {
    border-color: black;
  }

  &:checked {
    background-position: 50%;
    border-color: black;
  }
}

input[type='radio'] {
  border-radius: 50%;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='12' width='12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%236899d9' /%3E%3C/svg%3E ");
}
input[type='checkbox'] {
  border-radius: 3px;
  background-image: url("data:image/svg+xml,%3Csvg width='19' height='16' viewBox='0 0 19 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 4.74839C17 4.50646 16.9032 4.26452 16.729 4.09033L15.4129 2.7742C15.2387 2.60001 14.9968 2.50323 14.7548 2.50323C14.5129 2.50323 14.271 2.60001 14.0968 2.7742L7.74839 9.13226L4.90323 6.27743C4.72903 6.10323 4.4871 6.00646 4.24516 6.00646C4.00323 6.00646 3.76129 6.10323 3.5871 6.27743L2.27097 7.59355C2.09677 7.76775 2 8.00968 2 8.25161C2 8.49355 2.09677 8.73549 2.27097 8.90969L5.77419 12.4129L7.09032 13.729C7.26452 13.9032 7.50645 14 7.74839 14C7.99032 14 8.23226 13.9032 8.40645 13.729L9.72258 12.4129L16.729 5.40645C16.9032 5.23226 17 4.99033 17 4.74839V4.74839Z' fill='%236899d9'/%3E%3C/svg%3E%0A");
}