.link {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;

  .link-wrapper {
    position: relative;
    color: var(--color-black);
    border-radius: var(--button-border-radius);
    background-color: transparent;
    cursor: pointer;
    padding-inline: var(--button-padding-horizontal);
    padding-block: var(--button-padding-vertical);
    margin-block: 1rem;

    &:hover {
      background-color: var(--color-accent);
    }

    .link-content > a {
      position: relative;
      font-family: var(--font-family-primary), sans-serif;
      font-size: var(--font-size-medium);
      color: var(--button-text-color);
      text-wrap-mode: nowrap;
      inline-size: 100%;
      min-inline-size: var(--button-inline-size-big);
      block-size: var(--button-block-size-big);
      cursor: pointer;
      padding-inline: 1rem var(--button-padding-horizontal);
      padding-block: var(--button-padding-vertical);
      text-decoration: none;
      gap: 0.5rem;
      justify-content: flex-end;
      text-align: start;

      .lgd-icon svg {
        display: block;
        position: relative;
        inset-block-end: 0;
        inset-inline-start: 0;
        inline-size: var(--button-icon-inline-size);
        block-size: auto;
      }
    }
  }

  &.link--big_btn_colour-style {
    .link-wrapper {
      background-color: var(--color-accent-2);

      &:hover {
        background-color: var(--color-accent);
      }

      .link-content > a {
        position: relative;
        font-family: var(--font-family-primary), sans-serif;
        font-size: var(--font-size-medium);
        color: var(--button-text-color);
        text-wrap-mode: nowrap;
        inline-size: 100%;
        min-inline-size: var(--button-inline-size-big);
        block-size: var(--button-block-size-big);
        cursor: pointer;
        padding-inline: 1rem var(--button-padding-horizontal);
        padding-block: var(--button-padding-vertical);
        text-decoration: none;
        gap: 0.5rem;
        justify-content: flex-end;
        text-align: start;

        .lgd-icon svg {
          display: block;
          position: relative;
          inset-block-end: 0;
          inset-inline-start: 0;
          inline-size: var(--button-icon-inline-size);
          block-size: auto;
        }
      }
    }
  }
}

.link-wrapper {
  position: relative;
}

.link-content > a {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.link-content a:not([class*="toolbar"]):focus {
  border-radius: 50px;
  box-shadow: unset;
}

.link-icon {
  flex-shrink: 0;
  margin-inline-start: var(--link-icon-margin);
  position: relative;

  svg {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: var(--button-icon-inline-size);
    block-size: auto;
    display: block;
  }
}