.base {
  border-radius: var(--round-corners);
}

.upperCase {
  text-transform: uppercase;
}

.fontFamilyPrimary {
  font-family: var(--font-family-primary);
}

.fontFamilySecondary{
  font-family: var(--font-family-secondary);
}

.fontWeightPrimaryBold {
  font-weight: var(--font-weight-primary-bold);
}

.fontWeightPrimarySemiBold {
  font-weight: var(--font-weight-primary-semi-bold);
}

.fontWeightPrimaryRegular {
  font-weight: var(--font-weight-primary-regular);
}

.fontWeightSecondaryBold {
  font-weight: var(--font-weight-secondary-bold);
}

.fontWeightSecondarySemiBold {
  font-weight: var(--font-weight-secondary-bold);
}

.fontWeightSecondaryRegular {
  font-weight: var(--font-weight-secondary-regular);
}

.fontSizeExtraSmall {
  font-size: var(--font-size-1);
  line-height: 1.33;
}

.fontSizeSmall {
  font-size: var(--font-size-2);
  line-height: 1.14;
}

.fontSizeMedium {
  font-size: var(--font-size-2);
  line-height: 1.14;
}

.fontSizeLarge {
  font-size: var(--font-size-3);
  line-height: 1;
}

.textAlignLeft {
  text-align: left;
}

.textAlignCenter {
  text-align: center;
}

.textAlignRight {
  text-align: right;
}

.paddingSizeExtraSmall {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}

.paddingSizeSmall {
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

.paddingSizeMedium {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}

.paddingSizeLarge {
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}

.filled {
  border-style: solid;
  border-width: 1px;

  &.colorPrimary {
    color: var(--palette-text-000);

    &:not(.disabled),
    &:not(:disabled) {
      background-color: var(--palette-primary-500);
      border-color: var(--palette-primary-500);
    }

    &:hover, &.mouseHover {
      background-color: var(--palette-primary-600);
      border-color: var(--palette-primary-600);
    }
    &:active, &.active {
      background-color: var(--palette-primary-700);
      border-color: var(--palette-primary-700);
    }
    &.disabled {
      color: var(--palette-grey-400);
      background-color: var(--palette-grey-200);
      border-color: var(--palette-grey-200);
    }
  }

  &.colorSecondary {
    color: var(--palette-text-000);

    &:not(.disabled),
    &:not(:disabled) {
      background-color: var(--palette-grey-500);
      border-color: var(--palette-grey-500);
    }

    &:hover, &.mouseHover {
      background-color: var(--palette-grey-600);
      border-color: var(--palette-grey-600);
    }
    &:active, &.active {
      background-color: var(--palette-grey-700);
      border-color: var(--palette-grey-700);
    }
    &.disabled {
      color: var(--palette-grey-400);
      background-color: var(--palette-grey-200);
      border-color: var(--palette-grey-200);
    }
  }

  &.colorError {
    color: var(--palette-text-000);

    &:not(.disabled),
    &:not(:disabled) {
      background-color: var(--palette-error-500);
      border-color: var(--palette-error-500);
    }

    &:hover, &.mouseHover {
      background-color: var(--palette-error-600);
      border-color: var(--palette-error-600);
    }
    &:active, &.active {
      background-color: var(--palette-error-700);
      border-color: var(--palette-error-700);
    }
    &.disabled {
      color: var(--palette-grey-400);
      background-color: var(--palette-grey-200);
      border-color: var(--palette-grey-200);
    }
  }

  &.colorSuccess {
    color: var(--palette-text-000);

    &:not(.disabled),
    &:not(:disabled) {
      background-color: var(--palette-success-500);
      border-color: var(--palette-success-500);
    }

    &:hover, &.mouseHover {
      background-color: var(--palette-success-600);
      border-color: var(--palette-success-600);
    }
    &:active, &.active {
      background-color: var(--palette-success-700);
      border-color: var(--palette-success-700);
    }
    &.disabled {
      color: var(--palette-grey-400);
      background-color: var(--palette-grey-200);
      border-color: var(--palette-grey-200);
    }
  }
}

.outlined {
  &.colorPrimary {
    border-style: solid;
    border-width: 1px;

    &:not(.disabled),
    &:not(:disabled) {
      background-color: inherit;
      border-color: var(--palette-primary-500);
      color: var(--palette-primary-500);
    }

    &:hover, &.mouseHover {
      background-color: var(--palette-primary-500);
      border-color: var(--palette-primary-500);
      color: var(--palette-text-000);
    }
    &:active, &.active {
      background-color: var(--palette-primary-600);
      border-color: var(--palette-primary-600);
      color: var(--palette-text-000);
    }
    &.disabled {
      background-color: inherit;
      border-color: var(--palette-grey-400);
      color: var(--palette-grey-400);
    }
  }

  &.colorSecondary {
    border-style: solid;
    border-width: 1px;

    &:not(.disabled),
    &:not(:disabled) {
      background-color: inherit;
      border-color: var(--palette-grey-500);
      color: var(--palette-grey-500);
    }

    &:hover, &.mouseHover {
      background-color: var(--palette-grey-500);
      border-color: var(--palette-grey-500);
      color: var(--palette-text-000);
    }
    &:active, &.active {
      background-color: var(--palette-grey-600);
      border-color: var(--palette-grey-600);
      color: var(--palette-text-000);
    }
    &.disabled {
      background-color: inherit;
      border-color: var(--palette-grey-400);
      color: var(--palette-grey-400);
    }
  }

  &.colorError {
    border-style: solid;
    border-width: 1px;

    &:not(.disabled),
    &:not(:disabled) {
      background-color: inherit;
      border-color: var(--palette-error-500);
      color: var(--palette-error-500);
    }

    &:hover, &.mouseHover {
      background-color: var(--palette-error-500);
      border-color: var(--palette-error-500);
      color: var(--palette-text-000);
    }
    &:active, &.active {
      background-color: var(--palette-error-600);
      border-color: var(--palette-error-600);
      color: var(--palette-text-000);
    }
    &.disabled {
      background-color: inherit;
      border-color: var(--palette-grey-400);
      color: var(--palette-grey-400);
    }
  }

  &.colorSuccess {
    border-style: solid;
    border-width: 1px;

    &:not(.disabled),
    &:not(:disabled) {
      background-color: inherit;
      border-color: var(--palette-success-500);
      color: var(--palette-success-500);
    }

    &:hover, &.mouseHover {
      background-color: var(--palette-success-500);
      border-color: var(--palette-success-500);
      color: var(--palette-text-000);
    }
    &:active, &.active {
      background-color: var(--palette-success-600);
      border-color: var(--palette-success-600);
      color: var(--palette-text-000);
    }
    &.disabled {
      background-color: inherit;
      border-color: var(--palette-grey-400);
      color: var(--palette-grey-400);
    }
  }
}

.flat {
  background-color: transparent;

  &.colorPrimary {
    &:not(.disabled),
    &:not(:disabled) {
      color: var(--palette-primary-500);
    }

    &:hover, &.mouseHover {
      color: var(--palette-primary-600);
    }
    &:active, &.active {
      color: var(--palette-primary-700);
    }
    &.disabled {
      color: var(--palette-grey-400);
    }
  }

  &.colorSecondary {
    &:not(.disabled),
    &:not(:disabled) {
      color: var(--palette-grey-500);
    }

    &:hover, &.mouseHover {
      color: var(--palette-grey-600);
    }
    &:active, &.active {
      color: var(--palette-grey-700);
    }
    &.disabled {
      color: var(--palette-grey-400);
    }
  }

  &.colorError {
    &:not(.disabled),
    &:not(:disabled) {
      color: var(--palette-error-500);
    }

    &:hover, &.mouseHover {
      color: var(--palette-error-600);
    }
    &:active, &.active {
      color: var(--palette-error-700);
    }
    &.disabled {
      color: var(--palette-grey-400);
    }
  }

  &.colorSuccess{
    &:not(.disabled),
    &:not(:disabled) {
      color: var(--palette-success-500);
    }

    &:hover, &.mouseHover {
      color: var(--palette-success-600);
    }
    &:active, &.active {
      color: var(--palette-success-700);
    }
    &.disabled {
      color: var(--palette-grey-400);
    }
  }
}

.underline {
  text-decoration: underline;
}

.fullWidth {
  width: 100%;
}
