@use "../extends";
@use "../mixins";

textarea,
input[type="url"],
input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
.thin_border,
.input_field {
  @extend %default-input-style;
}

input[type="checkbox"] {
  transition: var(--transition-duration);

  &:focus {
    @include mixins.default-focus-style(
      $box-shadow: (
        inset 0 0 0 1px var(--focus-color),
        0 0 0 1px var(--focus-color)
      )
    );
  }
}

input[type="search"] {
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

textarea {
  height: auto;
}

.alchemy-char-counter {
  display: block;
  clear: both;
  text-align: right;

  &.too-long {
    color: var(--notice-error-text-color);
  }
}

fieldset {
  border: none;
  padding: 0;
  margin: 1em 0;

  legend {
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 0.5em;
  }
}

::-webkit-input-placeholder {
  line-height: 1.5;
  color: var(--border-color);
}

.page-publication-date-fields {
  padding-bottom: var(--spacing-1);
  @include mixins.clearfix;

  &.hidden {
    display: none;
  }
}
