.tagModal {
  --height: auto;
}

.header {
  font-size: 0.8em;
  margin: 8px 32px -8px 32px;
  color: var(--ion-color-medium);
}

.previewItem {
  pointer-events: none;

  font-size: 0.8em;
}

.userText {
  font-size: 0.7em;
  font-weight: normal;
}

.colorInput {
  :global(.native-input) {
    max-width: 42px;
  }

  :global(.input-clear-icon) {
    margin: 0 0 0 auto;
  }

  && input {
    appearance: none;
    border-radius: 4px;
    height: 25px;
    border: 1px solid
      var(
        --ion-item-border-color,
        var(
          --ion-border-color,
          var(
            --ion-color-step-250,
            var(--ion-background-color-step-250, #c8c7cc)
          )
        )
      );
  }

  ::-moz-color-swatch,
  ::-webkit-color-swatch {
    border-style: none;
  }

  ::-webkit-color-swatch-wrapper {
    padding: 0;
  }
}

.contents {
  composes: appLightColorContent from "#/features/shared/shared.module.css";

  /* can't use ion-content with auto height ion-modal */
  margin-bottom: var(--ion-safe-area-bottom);

  &.keyboardOpen {
    margin-bottom: 0;
  }
}
