// ===== Base Server Selector Styles =====
#server-selector {
  &.mat-mdc-form-field {
    // Default styles (fill variant)
    &:not(.outlined-variant) {
      mat-form-field {
        width: 96%;
      }
    }

    // Outlined variant styles (used in login)
    &.outlined-variant {
      .mat-mdc-text-field-wrapper {
        padding: 0;
      }

      .mat-mdc-form-field-flex {
        align-items: center;
      }

      .mat-mdc-form-field-infix {
        padding: 12px 0;
        min-height: 48px;
      }

      // Outlined border styles with Material Design 3
      .mdc-notched-outline {
        .mdc-notched-outline__leading,
        .mdc-notched-outline__notch,
        .mdc-notched-outline__trailing {
          border-color: var(--md-sys-color-outline, #79747e);
          border-width: 1px;
        }
      }

      // Hover state
      &:hover:not(.mat-form-field-disabled) {
        .mdc-notched-outline {
          .mdc-notched-outline__leading,
          .mdc-notched-outline__notch,
          .mdc-notched-outline__trailing {
            border-color: var(--md-sys-color-on-surface, #1a1c1e);
          }
        }
      }

      // Focused state
      &.mat-focused {
        .mdc-notched-outline {
          .mdc-notched-outline__leading,
          .mdc-notched-outline__notch,
          .mdc-notched-outline__trailing {
            border-color: var(--md-sys-color-primary, #1074b9);
            border-width: 2px;
          }
        }

        .mat-mdc-floating-label {
          color: var(--md-sys-color-primary, #1074b9);
        }
      }

      // Select styling
      .mat-mdc-select {
        font-size: 0.875rem;
        color: var(--md-sys-color-on-surface, #1a1c1e);
      }

      .mat-mdc-select-arrow {
        color: var(--md-sys-color-on-surface-variant, #44474e);
      }

      // Label styling
      .mat-mdc-floating-label {
        font-size: 0.875rem;
        color: var(--md-sys-color-on-surface-variant, #44474e);
      }
    }
  }
}

// Dark theme support for outlined variant
.dark-theme {
  #server-selector.outlined-variant {
    .mdc-notched-outline {
      .mdc-notched-outline__leading,
      .mdc-notched-outline__notch,
      .mdc-notched-outline__trailing {
        border-color: var(--md-sys-color-outline, #938f99);
      }
    }

    &:hover:not(.mat-form-field-disabled) {
      .mdc-notched-outline {
        .mdc-notched-outline__leading,
        .mdc-notched-outline__notch,
        .mdc-notched-outline__trailing {
          border-color: var(--md-sys-color-on-surface, #e2e2e5);
        }
      }
    }

    &.mat-focused {
      .mdc-notched-outline {
        .mdc-notched-outline__leading,
        .mdc-notched-outline__notch,
        .mdc-notched-outline__trailing {
          border-color: var(--md-sys-color-primary, #5ba2ec);
        }
      }

      .mat-mdc-floating-label {
        color: var(--md-sys-color-primary, #5ba2ec);
      }
    }

    .mat-mdc-select {
      color: var(--md-sys-color-on-surface, #e2e2e5);
    }

    .mat-mdc-select-arrow {
      color: var(--md-sys-color-on-surface-variant, #c4c6d0);
    }

    .mat-mdc-floating-label {
      color: var(--md-sys-color-on-surface-variant, #c4c6d0);
    }

    .sticky {
      background-color: var(--md-sys-color-surface-container, #2c2f36);
    }
  }
}

// ===== Common Styles =====
.actions {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.ml {
  margin-left: 10px;
}

.sticky {
  position: sticky;
  z-index: 1; // appear above mat-option
  top: 0; // fix at the top
  background-color: var(--md-sys-color-surface-container, white); // don't see mat-option when scrolling
  box-shadow: 1px -2px 10px 0 rgb(0 0 0 / 10%); // shadow at the bottom
}

mat-form-field {
  width: 96%;
}