%btn {
  border-width: $btn-border-width;
  border-style: solid;
  border-radius: $border-radius-base;
  cursor: pointer;
  display: inline-block;
  font: {
    family: $font-family-base;
    size: $btn-font-size;
    weight: 600;
  };
  height: $btn-height;
  line-height: $btn-height - ($btn-border-width*2);
  padding: $btn-padding;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  .transition & {
    @include transition(all .2s ease);
  }
  @extend %no-select;
  &:hover {
    text-decoration: none;
  }
}

%form-element {
  background-color: $input-bg-color;
  border: 2px solid $input-brd-color;
  border-radius: $border-radius-base;
  color: $text-color;
  display: inline-block;
  font: {
    family: $font-family-base;
    size: $font-size-base;
  };
  height: $input-height;
  outline: none;
  padding: 0 $input-padding;
  text-align: left;
  vertical-align: middle;
  width: 100%;
  &:focus {
    border-color: $input-focus-brd-color;
  }
  .no-border-style & {
    border: none;
  }
  &.__l {
    height: 52px;
    padding: 0 20px;
  }
}

%ttl-base {
  font-family: $font-family-heading;
  font-weight: bold;
  margin-bottom: $gutter;
  text-transform: uppercase;
  &.__brd-b {
    border-bottom: 2px solid $background-color;
    padding-bottom: $gutter;
  }
}

%ttl-cont {
  font-size: 16px;
  font-weight: bold;
}

%plate {
  background-color: #fff;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.12);
  padding: $gutter*2;
}

%no-select {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

%no-dec-link {
  color: $no-dec-link-color;
  text-decoration: none;
  &:hover {
    color: darken($no-dec-link-color, 30%);
  }
  &.__ac {
    color: $secondary-color;
  }
}

%abs-center {
  position: absolute;
  top: 50%;
  left: 50%;
  @include translate(-50%, -50%);
}

%inl-ic {
  display: inline-block;
  margin: -2px 5px 0 0;
  vertical-align: middle;
}

%w-icon {
  position: relative;
  &:after {
    content: '';
    position: absolute;
  }
}

%clean-list {
  margin: 0;
  list-style-type: none;

  & li {
    margin: 0;
    list-style-type: inherit;
  }
}

%clearfix {
  &:before,
  &:after {
    clear: both;
    content: '';
    display: table;
  }
}
