.wrapper {
  padding: 0;
  background: transparent;
  height: var(--ui-components-button-touch-target-size);
  appearance: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: var(--font-family-main);
  font-size: var(--global-typography-button-font-size);
  font-style: normal;
  font-weight: var(--global-typography-button-font-weight);
  line-height: var(--global-typography-button-line-height) /* 150% */;  
  text-decoration: none;

  &.full-width {
    width: 100%;

    & .visible-wrapper {
      width: 100%;
    }
  }

  & .visible-wrapper {
    border-radius: var(--ui-components-button-border-radius-top-left) var(--ui-components-button-border-radius-top-right) var(--ui-components-button-border-radius-bottom-right) var(--ui-components-button-border-radius-bottom-left);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: calc(2 * var(--ui-components-button-padding-horizontal));
    padding-right: calc(2 * var(--ui-components-button-padding-horizontal));
    height: var(--ui-components-button-visual-size);
  }


  & .icon {
    height: var(--ui-components-button-icon-size);
    width: var(--ui-components-button-icon-size);
  }

  &:not(.hasIconLeading) .icon.leading {
    display: none;
  }

  &:not(.hasIconTrailing) .icon.trailing {
    display: none;
  }

  & .label {
    padding-left: var(--ui-components-button-label-spacing);
    padding-right: var(--ui-components-button-label-spacing);
  }

  &.variant-normal {
    @mixin style style=normal visibleWrapperClass=.visible-wrapper;
    color: var(--on-normal-active-color);

    & .icon {
      color: var(--on-normal-neutral-color);
    }

    &:disabled .icon {
      color: var(--on-normal-disabled-color);
    }
  }

  &.variant-flat {
    @mixin style style=flat visibleWrapperClass=.visible-wrapper;
    color: var(--on-flat-active-color);

    & .icon {
      color: var(--on-flat-neutral-color);
    }

    &:disabled .icon {
      color: var(--on-flat-disabled-color);
    }
  }

  &.variant-raised {
    @mixin style style=raised visibleWrapperClass=.visible-wrapper;
    color: var(--on-raised-active-color);

    & .icon {
      color: var(--on-raised-neutral-color);
    }

    &:disabled .icon {
      color: var(--on-raised-disabled-color);
    }
  }

  &.variant-check:not(.checked) {
    @mixin style style=indent visibleWrapperClass=.visible-wrapper;
    @mixin font-body;
    color: var(--on-indent-active-color);

    & .icon {
      color: var(--on-indent-neutral-color);
    }

    &:disabled .icon {
      color: var(--on-indent-disabled-color);
    }
  }

  &.variant-check.checked {
    @mixin style style=selected visibleWrapperClass=.visible-wrapper;
    @mixin font-body-active;
    color: var(--on-selected-active-color);

    & .icon {
      color: var(--on-selected-neutral-color);
    }

    &:disabled .icon {
      color: var(--on-selected-disabled-color);
    }
  }
}