@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: calc(var(--container-mini) - var(--spacing-ui));
    flex: 1;
    border-inline-end: 1px solid transparent;
    border-end-end-radius: 0;
    border-start-end-radius: 0;
  }

  .password-input[data-no-icon] [data-scope="password-input"][data-part="input"] {
    max-width: var(--container-mini);
    border: 1px solid var(--color-ui--border);
    border-end-end-radius: var(--radius-ui);
    border-start-end-radius: var(--radius-ui);
  }

  .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;

    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--spacing-ui);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }

  .password-input
    [data-scope="password-input"][data-part="visibility-trigger"]
    [data-scope="password-input"][data-part="indicator"] {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .password-input [data-scope="password-input"][data-part="error"] {
    @apply ui-error;
  }
}