/* Network Dialogs */

@use "../../../../theme";
@use "../../../../theme-color";
@use "../../typography";

.nm-dialog {
  max-height: 34em;
  min-height: 31em;
  min-width: 32em;
}

.nm-dialog-content {
  spacing: 20px;
  padding: 24px;
}

.nm-dialog-airplane-box {
  spacing: 12px;
}

.nm-dialog-airplane-headline {
  // font-weight: bold;
  text-align: center;
}

.nm-dialog-airplane-text {
  color: theme-color.hint(theme-color.$on-surface);
}

// header
.nm-dialog-header {
  @include typography.headline6;
}

.nm-dialog-subheader {
  color: theme-color.hint(theme-color.$on-surface);
}

.nm-dialog-header-icon {
  icon-size: 32px;
  color: theme-color.hint(theme-color.$on-surface);
}

.nm-dialog-header-hbox {
  spacing: 16px;
}

// list of networks
.nm-dialog-scroll-view {
  border: 0;
  padding: 0;
  background-color: transparent;
}

// list item
.nm-dialog-item {
  transition-duration: theme.$state-duration;
  padding: 12px;
  spacing: 20px;
  border-bottom: 0;
  border-radius: theme.$corner-radius;
  font-size: 1em;

  &:focus {
    background-color: theme-color.focus-overlay(theme-color.$on-surface);
  }

  &:hover {
    background-color: theme-color.hover-overlay(theme-color.$on-surface);
  }

  &:active {
    transition-duration: theme.$ripple-duration;
    background-color: theme-color.pressed-overlay(theme-color.$on-surface);
  }

  &:selected {
    background-color: theme-color.$selected-overlay;
    color: theme-color.$on-surface;
  }
}

// icons in list
.nm-dialog-icon {
  icon-size: 16px;
  color: theme-color.hint(theme-color.$on-surface);
}

.nm-dialog-icons {
  spacing: .5em;
}

// no networks
.no-networks-label {
  color: theme-color.hint(theme-color.$on-surface);
}

.no-networks-box {
  spacing: 12px;
}
