$table-header-height: 2rem;

// Common element styles
button {
  margin: 0 0.5em;
  padding: 0.25em 0.5em;
  border: 1px solid var(--color-border);
  border-radius: 0.25em;
  background: var(--color-background);
  color: var(--color-text);
  font-size: 1.25em;
  cursor: pointer;

  &:disabled {
    color: var(--color-text);
    opacity: 0.5;
    cursor: not-allowed;
  }

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

[type=submit] {
  background: var(--color-accent);
  color: white !important;
  margin: 0.5em;
  font-size: 1.15em;
  padding: 0.5em;
  transition: background-color 0.5s;

  &:hover {
    background: var(--color-hover);
    color: var(--color-background);
  }
}

[type=text],
[type=email],
[type=password],
[type=number],
[type=date],
[type=datetime-local],
select,
textarea {
  width: 100%;
  background: var(--color-background-soft);
  color: var(--color-text);
  padding: 0.5em;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: border-color 0.5s;
  transition: border-color 0.5s;
  //
  width: 100%;
  padding: 0.5em;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background-soft);
}

.loading-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

form {
  .buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.33em;
    padding-top: 0.33em;

    button {
      height: 2.5em;
    }
  }
}

table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;

  thead {
    height: $table-header-height;

    tr {
      position: sticky;
      top: 0;
      background-color: var(--color-background);
      z-index: 1;

      th {
        padding: 0.5rem;
        text-align: left;
        font-weight: bold;
      }
    }
  }

  tbody {
    height: calc(100% - #{$table-header-height});

    tr {
      td {
        padding: 0.5rem;
        border-bottom: 1px solid var(--color-border);
      }

      &:hover {
        background-color: var(--color-background-soft);
      }
    }
  }
}
