.TextFormatter {
  z-index: 1;
  transform: translate(-50%, -3.25rem);

  &,
  &-link-control {
    position: absolute;

    padding: 0.5rem 0.375rem;
    border-radius: var(--border-radius-messages);

    background: var(--color-background);
    box-shadow: 0 1px 2px var(--color-default-shadow);
  }

  &-link-control {
    pointer-events: none;

    top: 0;
    left: 0;

    opacity: 0;

    transition: opacity 0.3s ease;

    .Modal & {
      max-width: 100%;
    }

    input {
      width: 100%;
      border: none !important;

      color: var(--color-text);

      background-color: var(--color-background);
      outline: none !important;
    }

    @media (max-width: 600px) {
      max-width: calc(100vw - var(--text-formatter-left) + 3rem);
    }
  }

  &-buttons,
  &-link-url-confirm {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }

  &-divider {
    width: 1px;
    height: 1.75rem;
    margin: 0 0.25rem;
    background-color: var(--color-borders);
  }

  &-link-url-input-wrapper {
    position: relative;
    width: 20rem;
    max-width: 100%;

    &::before,
    &::after {
      content: "";

      position: absolute;
      z-index: 2;
      top: 0;
      bottom: 0;

      display: block;

      width: 1rem;

      opacity: 0;

      transition: opacity 0.2s ease;
    }

    &::before {
      left: 0;
      background: linear-gradient(to right, var(--color-background) 0.25rem, transparent 1rem);
    }

    &::after {
      right: 0;
      background: linear-gradient(to left, var(--color-background) 0.25rem, transparent 1rem);
    }

    &.mask-left {
      &::before {
        opacity: 1;
      }
    }

    &.mask-right {
      &::after {
        opacity: 1;
      }
    }

    @media (max-width: 600px) {
      max-width: 90vw;
    }
  }

  &-link-url-confirm {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.3s ease;

    &.shown {
      opacity: 1;
    }
  }

  &.link-control-shown {
    .TextFormatter-link-control {
      pointer-events: auto;
      opacity: 1;
    }
  }

  .Button {
    cursor: var(--custom-cursor, pointer);

    flex-shrink: 0;

    width: 2rem;
    height: 2rem;
    margin: 0 0.125rem;
    padding: 0.25rem;
    border-radius: var(--border-radius-messages-small);

    font-size: 1.5rem;

    &.active {
      color: white;
      background-color: var(--color-primary) !important;
    }

    &.disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }
}
