.focus{
  $top-padding: .5rem;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: $light-gray;

  &__top{
    padding: $top-padding 1rem;
    background-color: $white;
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
  }

  &__top_warning{
    background: $alert;
    color: white;
    text-align: center;
    display: block;
    padding: 2px 0;
  }

  &__brand{
    display: flex;
    align-items: center;

    img{
      max-height: 20px;
    }
  }

  &__user{
    margin: 0 15px 0 auto;
    padding-right: 0;
    display: flex;
    align-items: center;
  }

  &__exit{
    display: flex;
    align-items: center;
    line-height: 1;
    margin: -$top-padding 0;
    padding: .5rem .25rem .5rem 1rem;
    border-left: 1px solid rgba(black, .2);
  }

  &__x-icon{
    font-size: 2rem;
    margin-right: .5rem;
    color: $muted;

    a:hover &{
      color: inherit;
    }
  }

  &__header{
    background-color: $dark-gray;
    color: $white;
    padding: 1rem;

    &-title{
      margin-bottom: 0;
    }
  }

  &__step{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  &__steps{
    text-transform: uppercase;
    font-size: 80%;
    letter-spacing: .05em;
    color: $light-gray;
  }

  &__content{
    flex-grow: 1;
    display: flex;

    .row{
      flex-grow: 1;
    }
  }

  &__footer{
    margin-top: auto;
    padding: 1rem;
    background-color: $white;

    .row{
      display: flex;
      align-items: baseline;
      width: 100%;
    }

    .button{
      margin-bottom: 0;
    }
  }

  &__back{
    font-weight: 600;

    svg{
      font-size: .7em;
      margin-right: .3em;
      vertical-align: 0;
    }
  }

  &__next{
    margin-left: auto;

    svg{
      font-size: .7em;
      margin-left: .3em;
      vertical-align: 0;
    }
  }
}