.environments
  width: 100%
  box-sizing: border-box

  .env-header
    position: fixed
    width: calc(100% - #{$sidebar-width + $app-tab-width})
    // margin-bottom: $app-tab-height
    top: 0
    z-index: 5
    left: $sidebar-width + $app-tab-width

  .add-assoc
    box-sizing: border-box
    padding-top: $env-grid-header-height

  .env-grid
    padding-top: $app-tab-height / 2

  .onboard-slider
    position: fixed
    bottom: 0
    z-index: 4
    left: $sidemenu-width
    width: calc(100% - #{$sidemenu-width})
    min-width: 800px
    border-left: none
    border-right: none
    border-bottom: none

    .slide-1 .small-divider
      margin-top: 25px

  .filter
    z-index: 5
    position: fixed
    height: $app-tab-height / 2 - 3px
    right: 0
    top: $app-tab-height
    width: calc(25% - #{$sidemenu-width / 4})
    background: none
    transform: translateX(calc(100% - 35px))
    transition: transform 0.2s ease-out

    &.prefixed-input > span
      background: hsl(0,0,85)
      cursor: pointer
      &:hover
        background: hsl(0,0,88)

    input, textarea
      background: rgba(#fff, 0.7)
      width: calc(100% - 35px)
      border-top: 1px solid rgba(#000, 0.1)
      border-bottom: 1px solid rgba(#000, 0.1)

    @media (max-width: $min-width)
      display: none

  &.show-filter .filter
    transform: translateX(0px)

.environments.is-onboarding
  margin-bottom: 500px

.environments.editing-multiline
  .filter
    display: none

.app-role-org_owner .environments:not(.did-onboard-import)
  &.is-onboarding
    margin-bottom: 0
  .onboard-slider
    position: static
    max-width: 625px
    margin: 40px
    border: 1px solid hsl(0,0,85)

