@include xs-screen {
  .not-xs {
    display: none !important;
  }
  .only-xs {
    display: inherit;
  }
}
@include sm-screen {
  .not-xs {
    display: inherit;
  }
  .only-xs {
    display: none !important;
  }
}
@include lg-screen {
  .not-xs {
    display: inherit;
  }
  .only-xs {
    display: none !important;
  }
}

.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
    0 2px 1px -1px rgba(0, 0, 0, 0.12);
}

.theme-wrapper.dark .shadow {
  border: 1px solid #fff3;
}

.font-text {
  @include body-font;
}
.font-title {
  @include title-font;
}
.font-button {
  @include button-font;
}
.poh:hover {
  cursor: pointer;
}
.scribble {
  font-family: 'Permanent marker';
  color: $oc-pink-5;
}
.fw-400 {
  font-weight: 400;
}
.fw-500 {
  font-weight: 500;
}
.fw-700 {
  font-weight: 700;
}

ul.inline {
  list-style-type: none;
  li:after {
    content: ',';
    margin-right: 0.5rem;
  }
  li {
    display: inline;
  }
}