.ui-button {
  cursor: pointer;
  outline: none;
  transition: all .1s ease-in-out;
}

.ui-button_variation_default {
  background: linear-gradient(to bottom, var(--tx-ui-button-default-normal-bg-top) 0, var(--tx-ui-button-default-normal-bg-bottom) 100%);
  border: none;
  border-bottom: var(--tx-ui-button-default-normal-bg-bottom) solid 1px;
  border-radius: var(--tx-ui-button-default-normal-border-radius);
  border-top: var(--tx-ui-button-default-normal-bg-top) solid 1px;
  box-shadow: var(--tx-ui-button-default-normal-shadow);
  color: var(--tx-ui-button-default-normal-text);
  font-family: var(--tx-generic-font-primary-font-family), var(--tx-generic-font-primary-generic-family);
  font-size: 23px;
  font-weight: var(--tx-generic-font-primary-weight-bold);
  padding: 15px 24px;
  position: relative;
  text-shadow: var(--tx-ui-button-default-normal-text-shadow);
  top: 0;

  span:before {
    color: var(--tx-button-icon-color-normal);
  }

  &:focus,
  &:hover {
    background: linear-gradient(to bottom, var(--tx-ui-button-default-hover-bg-top) 0, var(--tx-ui-button-default-hover-bg-bottom) 100%);
    border-bottom: var(--tx-ui-button-default-hover-bg-bottom) solid 1px;
    border-top: var(--tx-ui-button-default-hover-bg-top) solid 1px;
    box-shadow: var(--tx-ui-button-default-hover-shadow);
    outline: none;
    top: var(--tx-ui-button-default-hover-top);
    transition: all .1s ease-in-out;

    span:before {
      color: var(--tx-button-icon-color-hover);
    }
  }

  &:active {
    box-shadow: var(--tx-ui-button-default-active-shadow);
    top: 1px;
    text-shadow: var(--tx-ui-button-default-active-text-shadow);
    transition: all .1s ease-in-out;

    span:before {
      color: var(--tx-button-icon-color-active);
    }
  }
}

.ui-button_variation_ghost {
  background: var(--tx-ui-button-ghost-normal-background);
  border-radius: var(--tx-ui-button-ghost-normal-border-radius);
  border: var(--tx-ui-button-ghost-normal-border);
  color: var(--tx-ui-button-ghost-normal-color);
  font-family: var(--tx-generic-font-primary-font-family), var(--tx-generic-font-primary-generic-family);
  font-weight: var(--tx-ui-button-ghost-normal-font-weight);
  &:hover,
  &:active {
    border-color: var(--tx-ui-button-ghost-hover-border-color);
    color: var(--tx-ui-button-ghost-hover-color);
  }
}

.ui-button_variation_ghost-inverted {
  @extend .ui-button_variation_ghost;
  color: var(--tx-ui-button-ghost-inverted-color);
}

.ui-button_disabled_true,
.ui-button_disabled_true:focus,
.ui-button_disabled_true:hover,
.ui-button_disabled_true:active {
  background-color: var(--tx-ui-button-default-disabled-bg-bottom);
  background: linear-gradient(to bottom, var(--tx-ui-button-default-disabled-bg-top) 0, var(--tx-ui-button-default-disabled-bg-bottom) 100%);
  border: none;
  border-bottom: 3px solid var(--tx-ui-button-default-disabled-border-bottom);
  box-shadow: 0 2px var(--tx-ui-button-default-disabled-border);
  color: var(--tx-ui-button-default-disabled-text);
  cursor: default;
  position: static;
  text-shadow: var(--tx-ui-button-default-disabled-text-shadow);

  &.ui-button_size_xs {
    padding: 3px 6px;
  }

  &.ui-button_size_s {
    padding: 5px 10px;
  }

  &.ui-button_size_m {
    line-height: 40px;
  }

  &.ui-button_size_l {
    padding: 12px 17px;
  }

  &.ui-button_size_xl {
    padding: 15px 20px;
  }

  &.ui-button_variation_ghost {
    border: 3px solid var(--tx-ui-button-default-disabled-border-bottom);
  }

  &.ui-button_variation_link {
    border: none;
  }
}

.ui-button_size_xs {
  font-size: 15px;
  padding: 2px 6px;
}

.ui-button_size_s {
  font-size: 18px;
  padding: 4px 10px;
}

.ui-button_size_m {
  font-size: 22px;
  padding: 0 24px;
  line-height: 38px;
}

.ui-button_size_l {
  font-size: 26px;
  padding: 11px 17px;
}

.ui-button_size_xl {
  font-size: 28px;
  padding: 14px 20px;
}

.ui-button_variation_link {
  background: transparent;
  border: none;
  color:  var(--tx-button-link-color);
  display: inline-block;
  font-family: var(--tx-button-link-font-family);
  font-size: var(--tx-button-link-font-size);
  font-weight: var(--tx-button-link-font-weight);
  line-height: normal;
  padding: 0;
  text-decoration:  var(--tx-button-link-text-decoration);

  &:hover {
    color:  var(--tx-button-link-hover-color);
    font-family: var(--tx-button-link-hover-font-family);
    font-weight: var(--tx-button-link-hover-font-weight);
    text-decoration:  var(--tx-button-link-hover-text-decoration);
  }
}