.list-devices {
  display: flex;
  flex-wrap: wrap;
}

.list-devices .device,
.list-devices .device-wrapper {
  margin-right: $spacing-sm;
  margin-bottom: $spacing-xs;
}

.device,
.device.card {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  user-select: none;
}

.device.white {
  color: $white;
  & .clouddevice-info::before {
    background-color: $white;
  }
}

.device.card {
  padding: $spacing-sm;
  border-radius: $border-radius;
  background-color: $card-bg-gray;
}

.device.outline {
  padding: $spacing-sm;
  border: $border-width solid $border-color;
  border-radius: $border-radius;
}

.device-icon {
  margin-right: $spacing-xs;
}

.device-info {
  line-height: $line-height-sm;
}

.browser-list {
  display: flex;
  margin-top: $spacing-xxs;
}

.browser-list li {
  margin-right: $spacing-xxs;
}

.clouddevice-info {
  display: flex;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  margin-top: $spacing-xxs;
  font-size: $font-size-label;
}

.clouddevice-info::before {
  display: inline-block;
  background-color: $black;
  content: "";
  mask-image: url("@images/logo-mobile-cloud.svg");
  mask-repeat: no-repeat;
  width: 27px;
  height: $icon;
  margin-right: $spacing-icon-x;
} 

// Device with actions

.device-wrapper {
  display: flex;
}

.device-wrapper .device {
  margin: 0;
  padding: $spacing-sm;
  color: $white;
  border: none;
  border-radius: $border-radius 0 0 $border-radius;
  background-color: $primary;
  & .clouddevice-info::before {
    background-color: $white;
  }
}

.device-wrapper .device-actions {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: $spacing;
  margin-left: 1px;
  color: $white;
  background-color: $primary;
  border-radius: 0 $border-radius $border-radius 0;
}

.device-wrapper .device-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: $spacing;
  color: $white;
  border-top: 1px solid $white;
  &:hover {
    background-color: $link-hover-color;
  }
  &:first-child {
    border-top: none;
    border-top-right-radius: $border-radius;
  }
  &:last-child {
    border-bottom-right-radius: $border-radius;
  }
}