@use "../mixins";

html {
  box-sizing: border-box;
  height: 100%;
  font-size: var(--font-size_medium);

  &.turbo-progress-bar::before,
  .turbo-progress-bar {
    background-color: var(--color-blue_medium) !important;
    z-index: 400001;
  }

  &.loading-custom-elements body {
    opacity: 0;
  }
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

noscript {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  text-align: center;
  line-height: 1em;
  border-bottom: 1px solid var(--notice-warning-border-color);
  color: var(--notice-warning-text-color);
  background-color: var(--notice-warning-background-color);

  h1,
  p {
    margin: var(--spacing-4) 0;
  }
}

body {
  margin: 0;
  padding: 0;
  color: var(--text-color);
  font: var(--font-default);
  background-color: var(--body-background-color);
  height: 100%;
  cursor: default;
  opacity: 1;
  transition: opacity var(--transition-duration);

  // Fix for strange element window offset
  &.pages.edit {
    overflow: hidden;
  }

  &.prevent-scrolling {
    overflow: hidden;
  }
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-duration);

  &:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }

  img {
    border: none;
  }
}

a:focus,
[tabindex]:focus {
  @include mixins.default-focus-style;
}

form {
  margin-bottom: 0;
}

hr {
  border: 0 none;
  border-bottom: 1px solid;
  border-color: var(--border-color);
  opacity: 0.5;
}

.panel {
  width: 80%;
  max-width: 500px;
  margin: 2em auto;
  padding: var(--spacing-4);
  background: var(--panel-background-color);
  border-radius: var(--border-radius_medium);
  border: var(--border-default);
  border-color: var(--panel-border-color);
}

.float_right {
  float: right;
}

.float_left {
  float: left;
}

.center {
  text-align: center;
}

.top-rounded-border {
  @include mixins.border-top-radius(var(--border-radius_medium));
}

.left-rounded-border {
  @include mixins.border-left-radius(var(--border-radius_medium));
}

.right-rounded-border {
  @include mixins.border-right-radius(var(--border-radius_medium));
}

.bottom-rounded-border {
  @include mixins.border-bottom-radius(var(--border-radius_medium));
}

.bottom-left-rounded-border {
  border-bottom-left-radius: var(--border-radius_medium);
}

.disable-user-select {
  user-select: none;
}

.handle {
  cursor: move;
}

.with_padding {
  padding: var(--spacing-2);
}

.with_margin {
  margin: var(--spacing-2);
}

a img {
  border-style: none;
}

.full_width {
  width: 100%;
}

.hidden {
  display: none !important;
}

.mx-1 {
  margin-left: var(--spacing-1);
  margin-right: var(--spacing-1);
}

.mx-2 {
  margin-left: var(--spacing-2);
  margin-right: var(--spacing-2);
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.p-0 {
  padding: 0 !important;
}
