// Copyright (c) Microsoft. All rights reserved.

@import 'src/styles/mixins';
@import 'src/styles/themes';

.device-delete-container {
  @include rem-font-size(14px);

  .device-delete-header { @include rem-fallback(padding, 12px, 0px); }

  .toggle-btn-div { @include rem-fallback(margin, 12px, 0px); }

  .simulated-device-selected {
    display: flex;
    align-items: flex-start;
    border: 1px transparent solid;
    @include rem-fallback(margin, 12px, 0px);
    @include rem-fallback(padding, 16px);

    .info-icon svg {
      @include square-px-rem(16px);
      @include rem-fallback(padding, 0px, 8px);
    }
  }

  .device-delete-error {
    border: 1px transparent solid;
    @include rem-fallback(margin, 12px, 0px);
    @include rem-fallback(padding, 16px);
  }

  .wait-indicator { @include rem-fallback(margin-left, 8px); }

  .summary-icon svg {
    @include square-px-rem(16px);
    @include rem-fallback(margin-left, 8px);
  }

  @include themify($themes) {
    color: themed('colorContentTextDim');

    .device-delete-header { color: themed('colorContentText'); }

    .simulated-device-selected {
      color: themed('colorContentText');
      border-color: themed('colorContentTextDim');

      .info-icon svg { fill: themed('colorContentText'); }
    }

    .device-delete-error {
      border-color: themed('colorAlert');
    }

    .summary-icon svg { fill: themed('colorContentText'); }
  }
}
