.disabled {
  display: none !important;
  visibility: hidden !important;
  max-width: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
}

.d-none {
  display: none !important;
}

button,
input[type="submit"] {
  border-radius: 1em;
  padding: 1em;
  background-color: #4f378b;
  color: var(--c-primary-container-on);
  outline: none;
  border: none;
  transition: filter 0.25s;
  vertical-align: middle;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  user-select: none;

  &.clear {
    background-color: transparent;
    color: var(--c-primary);
    padding: 0.5em;
  }

  &.inverse {
    background-color: var(--c-primary);
    color: var(--c-on-primary);
  }

  &.onsurface {
    background-color: transparent;
    color: var(--c-surface-on);
    padding: 0.5em;
  }

  &:disabled {
    opacity: 0.2;
    cursor: default;
    filter: grayscale(1);
  }

  &:enabled {
    cursor: pointer;
  }

  &:enabled:hover {
    background-color: var(--c-primary-container-on);
    color: var(--c-primary-container);
  }

  &:enabled:active {
    filter: brightness(70%);
  }
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="date"] {
  font-size: 1.1em;
  outline: none;
  background-color: #36343b;
  color: var(--c-surface-on);
  border: none;
  border-radius: 0.25em 0.25em 0.1em 0.1em;
  padding: 0.5em;
  border-bottom: #49454f 0.15em solid;

  transition: border 0.1s;

  &:hover {
    border-bottom: var(--c-primary) 0.15em solid;
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

select {
  font-size: 1.1em;
  border-radius: 0.5em;
  padding: 0.5em;
  background-color: var(--c-primary-container);
  color: var(--c-primary-container-on);
  outline: none;
  border: none;
  transition: filter 0.25s;
}

select.inverse {
  background-color: var(--c-primary);
  color: var(--c-on-primary);
}

select.input-like {
  background-color: var(--c-surface-container-highest);
  color: white;
  border: none;
  border-right: 0.5em transparent solid;
  border-radius: 0.25em 0.25em 0.1em 0.1em;
  padding: 0.5em;
  border-bottom: var(--c-surface-variant) 0.15em solid;

  transition: border 0.1s;

  &:hover {
    border-bottom: var(--c-primary) 0.15em solid;
  }
}

select:not(.dont-fill) {
  width: 100%;
}

select:enabled {
  cursor: pointer;
}

select:enabled:not(.input-like):hover {
  filter: brightness(80%);
}

select:enabled:not(.input-like):active {
  filter: brightness(70%);
}

.badge {
  background: var(--c-surface-variant);
  color: var(--c-surface-variant-on);
  padding: 0.1em 0.5em;
  border-radius: 1em;
  font-size: 0.85em;
  font-weight: bold;
}

.loader {
  width: 10dvh;
  height: 10dvh;
  border: 1dvh solid var(--c-primary-container-on);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.button-go-to-top {
  position: fixed;
  z-index: 10;
  bottom: 1em;
  right: 1em;
  font-size: 1em;
  box-shadow: 0 0 16px #0f0d1385;

  transition: bottom 0.5s ease-in-out;

  &.hidden {
    bottom: -4em;
  }
}

.fadein {
  animation: forwards kf-fadein 0.1s ease-in-out;
}

.fadeout {
  animation: reverse kf-fadein 0.1s ease-in-out;
}

@keyframes kf-fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.dotted * {
  outline: #ffff00a0 2px dotted;
}

.children-block {
  > * {
    display: block;
  }
}

.children-inline {
  > * {
    display: inline;
  }
}

.children-width-100 {
  > * {
    width: 100%;
  }
}

.children-fill {
  display: flex;

  &.equal {
    > * {
      flex: 1;
    }
  }

  &.second {
    > *:nth-child(2) {
      flex: 100;
    }

    > *:not(:nth-child(2)) {
      flex: 1;
    }
  }

  &.first {
    > *:first-child {
      flex: 100;
    }

    > *:not(:first-child) {
      flex: 1;
    }
  }

  &.col {
    flex-direction: column;
    justify-items: center;
  }

  &.row {
    flex-direction: row;
    justify-items: center;
    align-items: center;
  }
}