@import "../main.css";

@layer components {
  .password-input [data-scope="password-input"][data-part="root"] {
    @apply ui-root;

    gap: var(--spacing-mini-gap);
    max-width: var(--container-ui);
  }

  .password-input [data-scope="password-input"][data-part="label"] {
    @apply ui-label;
  }

  .password-input [data-scope="password-input"][data-part="control"] {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    position: relative;
    margin-inline: auto;
    max-width: var(--container-mini);
  }

  .password-input [data-scope="password-input"][data-part="input"] {
    @apply ui-input;

    max-width: var(--container-mini);
    flex: 1;
    border-inline-end: 0;
    border-end-end-radius: 0;
    border-start-end-radius: 0;
  }

  .password-input
    [data-scope="password-input"][data-part="indicator"][data-state="visible"]
    [data-hidden] {
    display: none;
  }

  .password-input
    [data-scope="password-input"][data-part="indicator"][data-state="hidden"]
    [data-visible] {
    display: none;
  }

  .password-input
    [data-scope="password-input"][data-part="visibility-trigger"] {
    @apply ui-trigger ui-trigger--square;

    min-width: var(--spacing-ui);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
}