.sdc-button {
  .box-sizing;
  display: inline-block;

  outline: none;
  border-radius: 2px;
  padding: 0 16px;

  height: 32px;
  line-height: 32px;
  width: 120px;
  min-width: 90px;

  cursor: pointer;
  text-align: center;
  .body-1;
  &:disabled {
    cursor: default;
  }

  // Primary button
  &.sdc-button__primary {
    border: none;
    background-color: @blue;
    color: @white;

    &:not(:disabled) {
      &:hover, &:active {
        background-color: @light-blue;
      }
      &:focus:not(:active) {
        border: 0.5px solid @white;
        background-color: @light-blue;
        box-shadow: 0px 0px 0px 1px @light-blue;
      }
    }

    &:disabled{
      background: @disabled-blue;
    }
  }

  // Secondary button
  &.sdc-button__secondary {
    border: 1px solid @light-gray;
    background-color: transparent;
    color: @text-black;

    &:not(:disabled) {
      &:hover, &:active {
        background-color: transparent;
        color:@text-black;
        border: 1px solid @gray;
      }
      &:focus:not(:active) {
        color: @text-black;
        box-shadow: inset 0px 0px 0px 0px @light-gray, 0px 0px 0px 1px @gray;
      }
    }

    &:disabled {
      color: @disabled-blue;
      border-color: @disabled-blue;
    }
  }

  // Link button
  &.sdc-button__link {
    background-color: transparent;
    color: @blue;
    fill: @blue;
    border: none;

    &:not(:disabled) {
      &:hover, &:active {
        color: @light-blue;
      }
      &:focus:not(:active) {
        border: 1px solid @dark-blue;
        color: @light-blue;
      }
    }

    &:disabled{
      color: @disabled-blue;
    }
  }


  // error button
  &.sdc-button__error, &.sdc-button__alert {
    border: none;
    background-color: @red;
    color: @white;

    &:not(:disabled) {
      &:hover, &:active {
        background-color: @light-red;
      }
      &:focus:not(:active) {
        border: 0.5px solid @white;
        background-color: @light-red;
        box-shadow: 0px 0px 0px 1px @light-red;
      }
    }

    &:disabled{
      background: @disabled-red;
    }
  }


  /*** Sizes ***/
  &.btn-large{
    width: @btn-large;
  }

  &.btn-medium{
    width: @btn-medium;
  }

  &.btn-small{
    width: @btn-small;
  }

  &.btn-x-small{
    width: @btn-extra-small;
  }

  &.btn-default{
    width: @btn-default;
  }

  /*** Buttons with icons ***/
  .sdc-icon-right{
    margin-left: 15px;
  }

  .sdc-icon-left{
    margin-right: 15px;
  }

  svg {
    display: inline-block;
    vertical-align: middle;
  }
}