@import "flive-vars";

.content-wrapper {
  display: block;
  visibility: hidden;
  opacity: 0;
  border: solid;
  position: absolute;
  top: 100%;
  width: 250px;
  border: 1px solid lighten($layout-borders-color-darken, 5%);
  transition: all .2s linear;
  left: -20px;
  z-index: 100;
}

.reverse {
  left: auto;
  right: -20px;
}

.primary, .info, .warning, .alert, .launcher, .icon {
  background: #fff;
  left: 50%;
  margin: 1em -30px 0 -30px;
  &:before, &:after {
    content: "";
    display: block;
    position: absolute;
    left: 20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
  }
  &:before {
    top: -11px;
    border-color: transparent transparent lighten($layout-borders-color-darken, 5%) transparent;
  }
  &:after {
    top: -9px;
    border-color: transparent transparent #fff transparent;
  }
  &.reverse {
    right: 50%;
    left: auto;
    &:before, &:after {
      right: 20px;
      left: auto;
    }
  }
}

.dash-white,
.dash-lagoon,
.dash-night-blue,
.dash-grey {
  margin: 0;
  background: #fff;
  border: 1px solid $flive-medium-grey;
}

.dash-content {
  margin: 0;
  background: #fff;
  border: 1px solid $flive-medium-grey;
}

.full-width {
  width: 100%;
  left: 0;
  color: black;
  text-transform: none;
  background-color: white;
  border: 1px solid $form-control-border-color;

  & > div {
    padding: 0;
  }
}

.active {
  //display: block;
  visibility: visible;
  opacity: 1;
}

.content {
  font-size: 1rem;
  padding: 0.5em 0.5em 0.25em 0.5em;
  overflow-y: auto;
  text-align: left;
}

.launcher {
  width: 400px;
  .content {
    padding: 1.4em 1.4em 0 1.4em;
  }
}

.content-2-items-per-row {
  display: flex;
  flex-wrap: wrap;
  > * {
    @include span(6 of 12);
    &:nth-child(2n) {
      @include span(last 6 of 12);
    }
  }
}