* {
  box-sizing: border-box;
  transition: background-color 250ms var(--ease);
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  isolation: isolate;
  background-color: var(--background);
  font-size: var(--text-base);
  overflow-x: hidden;
  line-height: 1.75;
  color: var(--foreground);
  font-family: var(--text-sans);
  font-weight: 300;
  &.menu-show {
    overflow: hidden;
  }

  .toolbar-bar {
    z-index: 999;
  }
  [data-drupal-messages] {
    .messages.messages--status {
      display: none;
    }
  }
}

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

body[data-theme="light"] {
  background-color: var(--background) L;
}

body[data-user-role="admin"] {
  div[data-drupal-messages] {
    position: fixed;
    top: calc(50vh - 15rem);
    left: 0;
    height: 30rem;
    width: 11rem;
    background-color: rgb(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 99;

    transition: left 0.3s var(--ease);
    h2.visually-hidden {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0 1rem;
      top: 6.5rem;
      left: 6.5rem;
      width: 9rem;
      height: 2rem;
      clip: auto;
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      transform: rotate(90deg);
      background-color: rgb(0, 0, 0, 0.8);
      cursor: pointer;
    }
    .close {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: $font-fig;
      font-size: 0.8rem;
      font-weight: 700;
      top: 0;
      left: 11rem;
      width: 2rem;
      height: 2rem;
      color: #fff;
      background-color: #000;
      cursor: pointer;

      &.arrow::before {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: center;
        background-image: url("/sites/default/files/icons/arrow-orange.svg");
        transform: rotate(90deg);

        transition: transform 0.3s var(--ease);
      }
    }

    .messages.messages--status,
    .messages--error,
    .node__submitted {
      position: relative;
      display: block;
      width: calc(100% - 1rem);
      padding: 0.5rem;
      font-family: $font-fig;
      color: #fff;
      font-size: 0.8rem;

      .messages__list {
        margin: 0;
        padding: 0;
        .messages__item {
          list-style: none;
          margin: 0;
          padding: 0.5rem 0;
          border-bottom: solid 1px rgb(255, 255, 255, 0.3);
          a {
            font-size: 0.8rem;
            color: var(--primary);
            text-decoration: underline;
          }
        }
      }
    }

    .messages--error {
      h2 {
        background-color: $red2;
        color: #fff;
      }
      .messages__list {
        .messages__item {
          padding: 0.5rem;
          margin-bottom: 0.5rem;
          color: #fff;
          background-color: $red2;
          border: none;
        }
      }
    }

    &.hideme {
      left: -11rem;

      .close.arrow::before {
        transform: rotate(-90deg);
      }
    }
  }
}

.view-content ul > li,
.views-field .field-content .item-list > ul > li {
  list-style: none;
}
.view-content,
.views-field {
  ul {
    padding: 0;
    margin: 0;
  }
  li {
    padding: 0;
    margin: 0;
  }
}
/* .views-field ul li  */

.intro ul {
  padding: 0;
}

.hidden {
  display: none !important;
}

@media (min-width: 1024px) {
  body {
    &.menu-show {
      overflow: auto;
    }
  }
}