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

// BUTTON FILLED
%buttonFilled {
  &%buttonColorGrey,
  &%buttonColorBrand,
  &%buttonColorGreen,
  &%buttonColorBrandNew,
  &%buttonColorBrandNew2,
  &%buttonColorPrimary {
    background: $main-color;
    color: #fff;
    &:hover,
    &%buttonHasHover:hover {
      background: $hover-color;
    }
    &:disabled {
      background: $main-color  !important;
    }
    &:active {
      background: $main-color;
    }
  }
  &%buttonColorRed {
    background-color: cv('colors.danger');
  }
  &%buttonFilledWhite {
    background: hsla(0, 0%, 100%, 0.1);
    >%buttonContents {
      color: hsla(0, 0%, 100%, 0.7);
    }
    &:hover {
      background: hsla(0, 0%, 100%, 0.2) !important;
      >%buttonContents {
        color: #fff;
      }
    }
    &:disabled {
      background: hsla(0, 0%, 100%, 0.1) !important;
      >%buttonContents {
        color: hsla(0, 0%, 100%, 0.5);
      }
    }
  }
  // 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 INVERTED
%buttonInverted {
  &%buttonColorBrand,
  &%buttonColorGreen {
    background: #fff;
    color: $main-color;
    &:hover,
    &:active {
      background: hsla(0, 0%, 100%, 0.95);
      color: $hover-color;
    }
    &:disabled {
      background: hsla(0, 0%, 100%, 0.3);
    }
  }
}

// BUTTON OUTLINED
%buttonOutlined {
  &%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 {
  &%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;
  }
}