.footer {
  @include display(flex);
  @include align-items(stretch);
  @include flex-direction(row);
  @include justify-content(flex-start);

  &__db {
    @include flex(0 0 auto);
    @include area-selectable(top);
    position: relative;
    padding: $medium-padding;
    padding-right: 1.3em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &.footer__db--dimmed {
      @include th {
        color: muted-color();
        &:hover {
          color: medium-color();
        }
      }
    }

    &--expanded {
      @include flex(1);
    }

    &-sign {
      font-size: 6px;
      vertical-align: top;
      margin-left: $base-padding-h;
      position: absolute;
      right: 1em;
      top: 1em;
      @include th { color: action-color(); }
      &--error { @include th { color: error-color(); } }
    }

    &-open-title {
      margin-left: .3em;
    }
  }

  &__btn {
    @include flex(0 0 auto);
    @include area-selectable(top);
    padding: $base-padding;
    font-size: 1.4em;
    text-align: center;
    width: 1em;
  }

  &__update-icon {
    @include th { color: action-color(); }
    @include animation(shake 50s cubic-bezier(.36,.07,.19,.97) 0s infinite);
  }
}
