.keyable-actions
  .key-info
    display: flex
    align-items: center
    float: left
    position: relative
    top: -6px

    .secondary
      float: none
      margin-left: 0
      font-size: 12px

    .envkey-short
      font-family: $code-font
      font-size: 12px
      position: relative
      top: 5px
      margin: 0 2px 0 5px
      color: hsl(0,0,45)

    .key-date
      margin-left: 6px
      color: hsl(0,0,50)
      font-size: 12px
      font-weight: 200
      position: relative
      top: 5px

  .actions
    float: right
    display: inline-block
    position: relative
    top: 2px

    button
      font-family: $condensed-font
      font-size: 12px
      font-weight: 300
      border: 1px solid hsl(0,0,85)
      background: #fff
      color: rgba($darker-blue, 0.9)
      height: auto
      padding: 5px 10px
      margin-left: 6px
      transition: opacity 0.2s linear

      &:hover
        background: $darker-blue
        color: #fff
        border: 1px solid $darker-blue

  .key-icon
    position: relative
    margin-right: 10px
    top: 8px

    svg rect, svg path
      fill: rgba(#000, 0.15)

  &.has-key
    .key-icon
      svg rect, svg path
        fill: $dark-blue

  &.generating-key
    .key-icon
      svg rect, svg path
        fill: rgba($dark-blue, 0.2)
    .actions
      top: 0






