@import '../../../../styles/common';
@import '../../../../styles/vendor/bootstrap_foundation-sites';

.m-device-information {
  @include flex-grid-row($size: expand);

  margin-bottom: $co-margin;

  &__icon {
    @include flex-grid-size(shrink);

    padding-right: calc($co-margin / 2);
    color: $co-color__primary;
    font-size: $co-component__height;
    line-height: $co-component__height;
  }

  &__device {
    @include flex-grid-size;
  }

  &__info {
    @include flex-grid-row($size: expand);
  }

  &__current-device {
    @include flex-grid-size(shrink);

    padding-right: $co-component__spacing;
    color: $co-color__primary;
    font-weight: 700;
  }

  &__name {
    @include flex-grid-size(shrink);

    color: $co-color__primary--lower;
    font-weight: 700;
  }

  &__status {
    @include flex-grid-size(shrink);

    margin-left: auto;
    font-size: $co-font__size--xsmall;
    font-weight: 400;
  }

  &__status-icon {
    color: $co-color__success;
  }

  &__user-agent {
    color: $co-color__fg__text--high;
  }
}
