// We're using a double selector here to protect from styles leaked from the pages
input.alpheios-input {

  &,
  // The second selector below is required to override aggressive styling of some pages
  &[type] {
    box-sizing: border-box;
    margin: 0;
    font: inherit;
    font-size: var(--alpheios-base-text-size);
    max-width: 100%;
    width: 100%;
    @include alpheios-controls-border;
    padding: textsize(8px);
    background: var(--alpheios-text-bg-color);
    color: var(--alpheios-text-color);
    vertical-align: middle;
    display: inline-block;
    -webkit-appearance: none;
  }

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

  &[type="number"]::-webkit-inner-spin-button,
  &[type="number"]::-webkit-outer-spin-button {
    height: auto;
  }

  &::-moz-placeholder {
    opacity: 1;
  }

  &:not(input) {
    line-height: 40px;
  }

  &:focus,
  // The second selector below is required to override aggressive styling of some pages
  &[type]:focus {
    outline: none;
    border: inherit;
    // Include below is to override custom styles set by a page
    border: 1px solid var(--alpheios-border-color);
    @include alpheios-controls-border;
  }

  &:disabled {
    background-color: var(--alpheios-color-neutral-dark);
    color: var(--alpheios-color-neutral-lightest);
    // Include below is to override custom styles set by a page
    @include alpheios-controls-border;
  }

  &::placeholder {
    color: var(--alpheios-color-neutral-light);
  }

  &::-ms-input-placeholder {
    color: var(--alpheios-color-neutral-light) !important;
  }
}