@import 'variables';

// Base styles for reusable components like form elements.
.base--input {
  padding: @padding / 2;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid darken(@color__white, 20%);

  &:focus {
    outline: none;
    border-bottom-color: @color__blue--dark;
  }
}

.base--button {
  padding: (@padding / 2) @padding;
  background-color: @color__blue--light;
  color: @color__white;
  border: none;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  font-size: 80%;
  user-select: none;

  &:hover {
    background-color: darken(@color__blue--light, 5%);
    cursor: pointer;
  }

  &[disabled] {
    background-color: desaturate(@color__blue--light, 50%);
    &:hover {
      cursor: not-allowed;
    }
  }

  i {
    margin-right: @padding / 2;
  }
}

@import 'variables';

// Base styles for reusable components like form elements.
.base--input {
  padding: @padding / 2;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid darken(@color__white, 20%);

  &:focus {
    outline: none;
    border-bottom-color: @color__blue--dark;
  }

  &::-ms-clear {
    width: 0;
    height: 0;
  }
}

.base--button {
  padding: (@padding / 2) @padding;
  background-color: @color__blue--light;
  color: @color__white;
  border: none;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  font-size: 80%;
  user-select: none;

  &:hover {
    background-color: darken(@color__blue--light, 5%);
    cursor: pointer;
  }

  &[disabled] {
    background-color: desaturate(@color__blue--light, 50%);
    &:hover {
      cursor: not-allowed;
    }
  }

  i {
    margin-right: @padding / 2;
  }
}

Hide input clear button on IE.
Hide input clear button on IE.
