@use './colors.scss' as *;

%remove-default-styles {
  background: none;
  color: inherit;
  border: none;
  padding: 2px;
  font: inherit;
  font-size: var(--obl-font-size);
  cursor: pointer;
  border: 1px dotted transparent;
  outline: none;
}

.obl-input {
  @extend %remove-default-styles;

  &.obl-input-outline:focus {
    border: 1px dotted var(--default-border-outline-color);
  }

  &[type='number'] {
    appearance: textfield;
    -moz-appearance: textfield; /*For FireFox*/

    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }
}

.obl-text-area {
  @extend %remove-default-styles;
  width: 100%;

  &.obl-text-area-outline:focus {
    border: 1px dotted var(--default-border-outline-color);
  }

  &.obl-text-area-no-resize {
    resize: none;
  }
}

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