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

.m-link {
  @include o-clickable;

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

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

    width: 100%;
  }

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

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

    height: 100%;
  }

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

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

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

  &--badge {
    padding-right: $co-radius * 2;
    padding-left: $co-radius * 2;
    border-radius: $co-radius;
    background: $co-color__primary--low;
    color: $co-color__contrast__text;
    text-decoration: none;

    &:focus,
    &:visited,
    &:hover {
      background: $co-color__primary;
      color: $co-color__contrast__text;
    }
  }

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

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

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

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