.Button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: rem(8px) rem(28px);
  border-radius: rem(20px);
  min-height: rem(40px);

  font-family: $font-open-sans;
  font-weight: $font-regular;
  font-size: rem(16px);
  line-height: 100%;

  transition: all 0.15s linear;
  white-space: nowrap;
  width: max-content;

  @include ifdesktop{
    font-size: rem(24px);
    padding: rem(10px) rem(32px);
    border-radius: rem(28px);
    min-height: rem(54px);
  }

  &_fullWidth {
    width: 100%;
  }

  svg {
    width: rem(18px);
    height: rem(18px);
    //fill: var(--text-primary);

    margin-right: rem(18px);
  }

  &:hover {
    cursor: pointer;
    box-shadow: 1px 1px 1px 0px $color-darkgray;
  }

  &:active {
    box-shadow: inset 1px 1px 2px 0px $color-darkgray;
  }

  &:hover svg {
    fill: var(--white);
  }

  &_default {
    background: $color-lightgray;
    color: $color-text;
  }

  &_orange {
    background: $color-orange;
    color: $color-white;
  }

  &_ghost {
    background: transparent;
    color: $color-white;
    border: 1px solid $color-gray-border;
  }

  &_disabled {
    cursor: not-allowed;
  }
}