michaelchadwick/ember-remember-stuff

/* stylelint-disable selector-class-pattern, no-descending-specificity */
@import "rs-common/styles";
@import "components";

body {
  background-attachment: fixed;
  background-color: #fdfdfd;
  background-image: url("/assets/images/liquid-cheese.svg");
  background-size: cover;
  line-height: 1.1;
  margin: auto;
  max-width: 800px;
  padding: 0 2em;
}

a {
  color: #ba1701;
  text-decoration: none;

  &:hover {
    color: #e72e2e;
  }
}

h4,
h5,
h6 {
  margin-top: 0;
}

button {
  appearance: none;
  background-color: hsl(195, 52%, 36%);
  border: 0;
  border-radius: 3px;
  box-sizing: border-box;
  color: hsl(0, 100%, 100%);
  cursor: pointer;
  display: inline-block;
  padding: 0.3em 1em;
  vertical-align: middle;
  white-space: nowrap;

  &:disabled {
    background-color: #aaa;
    color: #888;
    cursor: auto;
  }

  @media (hover: hover) {
    &:not(:disabled):hover {
      background-color: hsl(195, 56%, 41%);
    }
  }
}

code {
  background-color: #e7e7e7;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  color: #c11847;
  display: inline-block;
  font-size: 0.9rem;
  padding: 2px;
}

form {
  display: grid;
  gap: 0.5em;

  input,
  textarea {
    border: 1px solid #ccc;
    font-family: monospace;
    min-width: 50%;
    padding: 0.75em;

    &::placeholder {
      font-size: 1em;
    }

    &.error {
      border-color: #f00;
    }
  }

  textarea {
    min-height: 100px;
  }

  button {
    border: 1px solid #ccc;
    font-size: 1em;
    padding: 0.5em;

    &:hover {
      background-color: #ffb9a2;
      border: 1px solid #000;
    }
  }
}

details {
  background-color: #fdfdfd;
  border: 1px solid #c7c7c7;
  border-radius: 0.5em;
  box-shadow: 0 0.25em 1.5em 0.25em rgba(0 0 0 / 10%);
  padding: 0;

  &:hover {
    background-color: #f3f3f3;
    border-color: #3b3b3b;
  }

  summary {
    border-radius: 0.5em;
    padding: 1em;

    &:hover {
      background-color: #eaeaea;
      cursor: pointer;
    }
  }
}

svg {
  &.svg-inline--fa {
    margin-right: 0.25em;
  }
}

table {
  border-collapse: collapse;
  margin: 0.7rem 0;

  th {
    text-align: left;
  }

  td {
    border: 0;
  }

  tr,
  td,
  th {
    padding: 0.25rem 0.1rem;
    vertical-align: middle;
  }

  th,
  td {
    overflow-wrap: break-word;

    &.text-left,
    &.align-left {
      text-align: left;
    }

    &.text-center,
    &.align-center {
      text-align: center;
    }

    &.text-right,
    &.align-right {
      text-align: right;
    }

    &.text-top {
      vertical-align: top;
    }

    &.text-middle {
      vertical-align: middle;
    }

    &.text-bottom {
      vertical-align: bottom;
    }
  }

  &.condensed {
    font-size: 0.85rem;

    tr,
    td,
    th {
      margin: 0;
      padding: 0 0.1rem;
    }
  }

  .hide-from-small-screen {
    display: none;

    @media (min-width: 992px) {
      display: table-cell;
    }
  }

  .hide-from-tablet-screen {
    display: none;

    @media (min-width: 768px) {
      display: table-cell;
    }
  }

  .hide-from-large-screen {
    display: none;

    @media (max-width: 991px) {
      display: table-cell;
    }
  }

  &.sticky-header {
    position: relative;

    th {
      position: sticky;
      top: 0;
    }
  }
}

ul {
  &.code {
    font-family: monospace;
    font-size: 1rem;
    line-height: 1.3;
  }
}

.validation-error {
  color: #f00;
  font-size: 0.75em;
  font-weight: bold;
  padding: 0.5em;
}

main {
  margin-top: 1em;
}