@import '../../styles/colors-v2.css';
@import '../../styles/spacing.css';
@import '../../styles/typography.css';

.interactivity {
  cursor: pointer;
}

.typography {
  font-family: var(--mavenlink-type-font-family); /* stylelint-disable-line mds/typography */
  font-size: var(--mavenlink-type-button-font-size); /* stylelint-disable-line mds/typography */
}

.button {
  composes: typography;
  composes: interactivity;
  border: none;
  border-radius: 3px;
  box-sizing: border-box;
  height: 32px;
  padding-bottom: 0;
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
  padding-top: 0;
  white-space: nowrap;
}

.button:hover {
  opacity: 0.7;
}

.button[disabled] {
  cursor: default !important;
}

.button[disabled]:hover {
  opacity: 1;
}

.primary {
  composes: button;
  background-color: var(--mds-brand-100);
  color: var(--white);
}

.primary[disabled] {
  background-color: var(--mds-grey-12);
  color: var(--mds-grey-38);
}

.secondary {
  composes: button;
  background-color: var(--white);
  border-width: 1px;
  border-style: solid;
  border-color: var(--mds-grey-12);
  color: var(--mds-grey-54);
}

.secondary[disabled] {
  background-color: var(--mds-grey-12);
  border: none;
  color: var(--mds-grey-38);
}

.subtle {
  composes: button;
  background-color: transparent;
  border: none;
  color: var(--mds-grey-54);
}

.subtle:hover {
  background-color: var(--mds-grey-opaque-3);
  color: var(--mds-grey-87);
}

.subtle[disabled]:hover {
  background-color: transparent;
}