@import '../../constants/style/color';

.linksContainer {
  padding: 4px;

  .linkContainer {
    margin-bottom: 8px;
  }
  .linkContainer:last-of-type {
    margin-bottom: 0;
  }
}

.linkContainer {

  &.sizeXs {
    font-size: 11px;
  }

  &.sizeS {
    font-size: 11px;
    text-transform: uppercase;
  }

  &.sizeM {
    font-size: 13px;
  }

  &.sizeL {
    font-size: 16px;
  }

  display: flex;
  line-height: 1.3;
  overflow: hidden;
  max-width: 100%;

  .prefix, .suffix {
    display: flex;
  }

  &.inline {
    display: inline;
    width: auto;
  }

  &.noWrap {
    a {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .prefix, .suffix {
      display: flex;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  a {
    color: $default;
    height: 100%;
  }

  a:hover {
    color: $primary-text;
    text-decoration: underline;
    cursor: pointer;
  }

  &.intentPrimary {
    a {
      color: $primary-text-hover;
    }

    a:hover {
      color: $primary-text;
      text-decoration: underline;
    }
  }

  &.intentDark {
    a {
      color: $dark;
      text-decoration: underline;
    }

    a:hover {
      color: $primary-text-hover;
    }
  }
}