@import '../../styles/common';
@import '../../styles/object/o-clickable';
@import '../../styles/vendor/bootstrap_foundation-sites';

.m-button {
  @include o-clickable;

  text-align: left;

  &__text {
    margin-left: calc($co-margin / 4);
  }

  &--center {
    text-align: center;
  }

  // display: inline, inline-block or expanded :
  &--inline-block {
    @include o-clickable--button;
  }

  &--block {
    @include o-clickable--button;

    width: 100%;
  }

  &--inline {
    @include o-clickable--inline;
  }

  &--text {
    @include o-clickable--text;
  }

  &--expanded {
    @include o-clickable--button;
    @include o-clickable--expanded;
  }

  // shape: plain or hollow :
  &--plain {
    @include o-clickable--plain;
    @each $name, $color in $caliopen-palette {
      &.m-button--#{$name} {
        $color-hover: scale-color($color, $lightness: -50%);

        border-color: transparent;
        background-color: $color;
        color: $co-color__clickable-text--contrasted;

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

  &--hollow {
    @include o-clickable--hollow;
    @each $name, $color in $caliopen-palette {
      &.m-button--#{$name} {
        $color-hover: scale-color($color, $lightness: -50%);

        &:hover,
        &:focus {
          background-color: transparent;
        }
      }
    }
  }

  &--active {
    @include o-clickable--active-text;
    @include o-clickable--active-button;
  }

  @include breakpoint(small only) {
    &__text {
      max-width: 1.5 * $co-component__height;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: $co-font__size--small;
      white-space: nowrap;
    }

    &--icon-only {
      .m-button__text {
        display: none;
      }
    }

    &--text-only {
      .m-button__icon {
        display: none;
      }
    }
  }
}
