/*
 * some basic styles
 */

.meta-MetaWindow {
  z-index: 1031;

  .meta-nav {
    text-decoration: none;
  }
}

.pulse {
  animation: pulse 0.8s linear infinite;
}

// navs
.navbar-toggler {
  transition: transform ease 0.4s;
}

.navbar-toggler-icon {
  height: auto;
  width: auto;
}

.nav-item,
.nav-link {
  display: flex;
}

button.nav-link {
  border: 0;
  letter-spacing: inherit;
  outline: 0;
  text-transform: inherit;
}

.navbar-toggler {
  &[aria-expanded="true"] {
    transform: rotate(90deg);
  }
}

.dropdown-toggle {
  padding-right: 1.5em;
  position: relative;

  &:after {
    bottom: 1em;
    position: absolute;
    right: 0.5em;
  }
}

.navbar-nav .dropdown-toggle.nav-link {
  padding-right: 1.5em;
}

.dropdown.show .dropdown-toggle::after,
.dropdown-toggle.active-dropdown::after,
.dropdown-toggle.active::after {
  transform: rotate(-90deg);
}

.dropdown-menu {
  border-radius: 0;
  overflow: hidden;
  padding: 0;
  transition: none;
  will-change: max-height, display;

  &.show {
    animation: expand 2s;
    animation-fill-mode: both;
    overflow: visible;
  }

  .dropdown-list {
    @extend .list-unstyled;
  }

  .dropdown-menu {
    left: 100%;
    top: 0;
  }
}

.dropdown-item {
  white-space: normal;
}

.field {
  display: flex;
  flex-wrap: wrap;
  margin: $form-spacer-y 0;
  position: relative;

  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.btn-toolbar {
  margin-top: $form-spacer-y;
}

// rewrite btn opacity on hover
.btn {
  &:hover,
  &.active,
  &:focus {
    opacity: 1;
  }
}

// SS-messages

.alert + .alert {
  border-top: 0;
}

/*.message {
    @extend .alert;

    @extend .alert-info;

    display: block;
    margin: 0.5rem 0;
}

.message.validation,
.message.required,
.message.error {
    @extend .alert;

    @extend .alert-danger;
}

.message.required,
.message.error {
    @extend .alert;

    @extend .alert-danger;
}*/

.list-group-item.active {
  a,
  .a {
    color: $list-group-active-color;
  }
}

[aria-expanded="true"] {
  .fa-bars {
    &:before {
      content: "\f00d";
    }
  }
}

.jsSidebarUI {
  min-height: 100%;
  position: relative;
}

.jsSidebarUI__inner {
  position: relative;
  will-change: position, top;
}