#ticket-shop-change-password-view {
  border-top-left-radius: var(--sheet-border-radius);
  border-top-right-radius: var(--sheet-border-radius);
  width: 100%;
  max-width: 44rem;
  max-height: min(100lvh - 0.8rem);
  overflow: clip;

  @media (width >= 680px) and (height >= 620px) {
    &:not([hidden]) {
      border-radius: var(--sheet-border-radius);
      translate: 0% calc((100vh - 100%) / -2);
    }
  }

  > header > .save:not(:disabled) {
    color: var(--color-green);
  }

  > form {
    padding: 2.4rem 1.6rem;
    display: grid;
    gap: 1.6rem;

    > label {
      display: grid;
      gap: 0.6rem;

      > span {
        padding-inline: 0.8rem;
        font-weight: 600;
      }

      > input {
        border: var(--toolbar-border);
        border-radius: 100vmax;
        padding-inline: 1.6rem;
        width: 100%;
        height: 4.4rem;
        font-size: 1.6rem;
      }
    }

    > .status {
      margin: 0;
      padding-inline: 0.8rem;
      min-height: 1.3em;
      color: var(--color-red);
      font-size: 1.4rem;
      line-height: 1.3;
      text-align: center;
      text-wrap: balance;

      &[data-success] {
        color: var(--color-green);
      }
    }
  }
}