@use '../../../../styles/_globals.scss' as *;

:host {
  @include mq(xxs) {
    display: block;
    width: 400px;
  }

  @include mq(xs) {
    display: block;
    width: 500px;
  }

  @include mq(sm) {
    display: block;
    width: 600px;
  }

  help-section {
    margin: auto;
  }

  ::ng-deep {
    //.help-btn {
    //  position: relative !important;
    //  left: 0 !important;
    //  top: 0 !important;
    //  display: block;
    //  margin: 0 auto 16px !important;
    //}
  }
}

:host::ng-deep {
  .tpl .warning-box {
    margin: var(--s2);
    margin-bottom: var(--s4);
    font-weight: bold;
    display: flex;
    align-items: center;

    &:before {
      @include materialIcon('warning');
      margin-right: var(--s);
    }
  }

  .tpl hr {
    margin-bottom: var(--s4);

    border-color: var(--separator-color);
  }

  .sub-section-heading {
    margin-top: var(--s4);
  }

  .sub-section-heading,
  .sub-section-heading-first {
    font-size: 19px;
  }
}

.action-row {
  margin-bottom: var(--s2);
}

.connected-status {
  margin-left: var(--s);
  color: var(--palette-accent);
}

.connected-status-icon,
.error-status-icon {
  vertical-align: middle;
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.error-status {
  margin-left: var(--s);
  color: var(--palette-warn);
}

.success-info {
  margin: 0 var(--s2);
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
