/* BUTTON */
%button {
  border-radius: 3px;
  transition: background-color 0.3s ease-in-out;
}

// BUTTON FILLED
%buttonFilled {
  &:is(
  %buttonColorBrand,
  %buttonColorGreen,
  %buttonCallInvite,
  %buttonColorPrimary) {
    background: $main-color;
    color: #fff;
    &:hover {
      background: $hover-color;
    }
    &:disabled {
      background: cv('colors.danger');
    }
    &:active {
      background: cv('colors.success');
    }
  }
  &%buttonColorRed {
    background-color: cv('colors.danger');
  }
  &:is(%buttonColorBrandInverted, &%buttonColorWhite) {
    background: #fff;
    color: $main-color;
    &:is(:hover, :active) {
      background: hsla(0, 0%, 100%, 0.95);
      color: $hover-color;
    }
    &:disabled {
      background: hsla(0, 0%, 100%, 0.3);
    }
  }
  // EMBED BUTTON
  %embedContainer & {
    &%buttonColorGreen {
      background-color: cv('colors.success');
      &:hover,
      &:active {
        background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.1%), 33.3%);
      }
    }
  }
}

// BUTTON OUTLINED
%buttonOutlined {
  &:is(
  %buttonColorWhite,
  %buttonColorPrimary,
  %buttonColorGreen,
  %buttonColorBrand) {
    border-color: $main-color;
    color: hsla(0, 0%, 100%, 0.8);
    &:hover {
      background-color: transparent;
      border-color: $hover-color;
      color: #fff;
    }
  }
  &%buttonColorRed {
    border-color: cv('colors.danger');
    color: hsla(0, 0%, 100%, 0.8);
    &:hover {
      background-color: transparent;
      color: #fff;
    }
  }
}

// BUTTON LINK
%buttonLink {
  &:is(
  %buttonColorWhite,
  %buttonColorPrimary) {
    color: #fff;
  }
  &%buttonColorBrand {
    color: $main-color;
  }
  &%buttonColorLink {
    color: var(--url-color);
    &:disabled:hover %buttonContents {
      text-decoration: none;
    }
  }
  &%buttonColorRed {
    color: cv('colors.danger');
  }
  &:hover %buttonContents {
    background-image: none;
    text-decoration: underline;
  }
}

// CIRCLE
%buttonCircle {
  background-color: hsla(0, 0%, 0%, 0.6);
  color: #fff;
  &:hover {
    &:not(%buttonCircleDisabled) {
      background-color: $hover-color;
      color: #fff;
    }
  }
}
