.association-row
  box-sizing: border-box
  width: 100%
  border-bottom: 1px solid rgba(#000, 0.05)
  // padding: 13px 15px
  height: $app-tab-height
  position: relative

  &:last-of-type
    border-bottom: none

  .remove
    position: absolute
    top: 13px
    left: 12px
    img
      width: 19px
      opacity: 0.15
      transition: opacity 0.15s linear

    &:hover img
      cursor: pointer
      opacity: 0.6

  .top-row
    padding: 13px 15px 0 15px
    margin-bottom: 12px

  .bottom-row
    padding: 0 15px 13px
    position: relative

  .primary
    a
      padding-bottom: 1px

    &, a, a:visited, a:hover
      text-decoration: none
      color: rgba($darker-blue, 0.8)
      font-size: 14px
      font-weight: 400

    a:hover
      border-bottom: 1px solid rgba($darker-blue, 0.7)

  .secondary
    float: right
    color: hsl(0,0,65)
    font-size: 12.5px
    font-weight: 300
    display: inline-block
    position: relative
    top: 5px
    background: transparent
    transition: background 0.3s ease-out

    &.status
      float: left

      em
        font-style: normal
        color: hsl(0,0,30)
        font-weight: 400

    &.granting-env-access

      background: $light-blue
      color: #fff
      display: block
      position: absolute
      left: 0
      width: 100%
      box-sizing: border-box
      padding: 0 15px

      > span
        font-size: 11.5px
        position: relative
        top: 8px
        font-weight: 400


      .small-loader
        top: 0
        float: right

        > svg
          width: 20px

          path, rect
            fill: #fff

  .top-row
    .secondary
      top: 2px

  .small-label
    font-family: $condensed-font
    font-weight: 200
    font-size: 12px
    color: rgba($darker-blue, 0.9)

  &.removing
    .actions
      opacity: 0
      pointer-events: none

  .msg-flash
    left: 0
    height: 70%

  // .small-loader
  //   position: absolute
  //   right: 15px
  //   bottom: 8px

  &.deletable .top-row
    padding-left: 39px

  &.key-generated
    height: $app-tab-height + 40px

  .invite-actions
    float: right
    position: relative
    top: 2px

    a
      color: $light-blue
      cursor: pointer
      font-size: 10.5px
      font-weight: 400

      &:first-of-type

        &:after
          content: "|"
          color: hsl(0,0,90)
          margin: 0 5px

    .small-loader
      svg
        width: 24px
        height: 24px

.association-manager
  &.user-app, &.app-user
    .association-row.is-removing .remove
      position: absolute
      left: 15px
      .small-loader
        svg
          width: 17px

  &.user-app .association-row.is-removing .remove
    top: 12px

  &.app-user .association-row.is-removing .remove
    top: 7px


