@import '../common';
@import '../vendor/bootstrap_foundation-sites';

@mixin o-clickable {
  transition: $co-animation__clickable-transition;
  border-color: $co-color__primary;
  color: $co-color__clickable-text;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;

  &:disabled {
    cursor: default;

    &:hover {
      color: $co-color__clickable-text--hover;
    }
  }

  &:hover {
    color: $co-color__clickable-text--hover;
  }

  &:active {
    color: $co-color__clickable-text--contrasted;
  }

  @each $name, $color in $caliopen-palette {
    &--#{$name} {
      $color-hover: scale-color($color, $lightness: -50%);

      border-color: $color;
      color: $color;

      &-plain,
      &:hover,
      &:focus {
        &:not(:disabled) {
          background-color: $color-hover;
          color: $co-color__clickable-text--hover;
        }
      }
    }

    // &--#{$name}#{'-plain'} {
    //   background-color: $color-hover;
    //   color: $co-color__fg__text--high;
    // }
  }
}

@mixin o-clickable--text {
  color: $co-color__primary--low;
  text-decoration: underline;

  &:hover,
  &:focus {
    color: $co-color__primary--low;
    text-decoration: none;
  }
}

// display: inline, inline-block or expanded (
@mixin o-clickable--inline {
  display: inline;
}
@mixin o-clickable--button {
  display: inline-block;
  padding: 0 map_get($co-margin_, xsmall);
  line-height: $co-component__height;
  white-space: nowrap;

  @include breakpoint(medium) {
    padding-right: map_get($co-margin_, small);
    padding-left: map_get($co-margin_, small);
  }

  &:hover {
    color: $co-color__clickable-text--hover;

    &:not(:disabled) {
      background-color: $co-color__primary;
    }
  }

  &:active {
    background-color: $co-color__primary--lower;
  }
}
@mixin o-clickable--expanded {
  display: block;
  width: 100%;
  line-height: inherit;
}

// shape: hollow or plain
@mixin o-clickable--hollow {
  border-width: 1px;
  border-style: solid;
}
@mixin o-clickable--plain {
  background-color: $co-color__primary;
  color: $co-color__clickable-text--contrasted;

  &:hover:disabled {
    // force initial color
    color: $co-color__clickable-text--contrasted;
  }
}

@mixin o-clickable--active-text {
  color: $co-color__clickable-text;
  cursor: default;
}

@mixin o-clickable--active-button {
  background-color: $co-color__primary--low;
}
