.translation-memory {
  .upload-wrapper {
    float: right;

    .button.upload {
      .fas {
        padding-right: 2px;
      }
    }

    .button.cancel {
      display: none;
      background-color: transparent;
      margin-left: 0;

      .fas {
        margin-right: 0;
      }
    }

    .button.cancel:hover {
      .fas {
        color: var(--white-1);
      }
    }

    .button.confirm {
      display: none;
    }
  }

  .upload-terms {
    display: none;
    color: var(--light-grey-7);
    font-style: italic;
    line-height: 1.5em;
    padding-top: 10px;
    text-align: right;
  }

  .controls.uploading {
    .button.upload {
      display: none;
    }

    .button.cancel {
      display: inline-block;
    }

    .button.confirm {
      display: inline-block;
    }

    .upload-terms {
      display: block;
    }
  }

  table {
    height: 100%;

    tr {
      height: 100%;

      border-top: 1px solid var(--main-border-1);

      .text {
        width: 340px;
      }

      .actions {
        text-align: right;
      }
    }

    tr:first-child {
      border-top: none;
    }

    tbody {
      tr.skeleton-loader {
        display: none;

        .skeleton {
          animation: fading 1.5s infinite;
          background-color: var(--translation-secondary-color);
          font-size: 15px;
          height: 28px;
          width: 80%;
        }

        .actions {
          .skeleton {
            float: right;
            width: 54%;
          }
        }
      }

      tr.skeleton-loader.loading {
        display: table-row;
      }

      tr {
        td {
          padding: 10px;
        }

        td.no-results {
          text-align: left;
        }

        .text {
          color: var(--light-grey-7);
          font-size: 15px;
          line-height: 1.8em;

          mark {
            background: var(--search-background);
            color: var(--search-color);
            font-weight: inherit;
            font-style: inherit;
            border-radius: 3px;
          }

          .empty {
            border: 1px solid var(--main-border-1);
            border-radius: 3px;
            color: var(--light-grey-7);
            padding: 0 4px;
          }

          a {
            color: var(--white-1);
            display: inline-block;
          }

          a:hover {
            color: var(--status-translated);

            .empty {
              color: var(--status-translated);
            }
          }
        }

        .target {
          textarea {
            display: none;
            box-sizing: border-box;
            color: var(--white-1);
            font-size: 15px;
            font-weight: 100;
            height: 100%;
            width: 100%;
          }
        }

        .actions {
          vertical-align: top;
          width: 240px;

          .button {
            background: var(--button-background-1);

            .fas {
              margin-right: 2px;
            }
          }

          .button.edit:hover {
            background: var(--status-translated);
          }

          .button.save {
            display: none;
          }

          .button.save:hover {
            background: var(--status-translated);
          }

          .button.delete {
            margin-left: 5px;
          }

          .button.delete:hover {
            background: var(--status-error);
          }

          .button.are-you-sure {
            display: none;
            background: var(--status-error);
            color: var(--black-3);
          }

          .button.cancel {
            display: none;
            background-color: transparent;
            margin-left: 0;

            .fas {
              margin-right: 0;
            }
          }

          .button.cancel:hover {
            .fas {
              color: var(--white-1);
            }
          }
        }
      }

      tr.editing {
        .target {
          .content-wrapper {
            display: none;
          }

          textarea {
            display: block;
          }
        }

        .button {
          display: none;
        }

        .button.save {
          display: inline-block;
        }

        .button.cancel {
          display: inline-block;
        }
      }

      tr.deleting {
        .button {
          display: none;
        }

        .button.are-you-sure {
          display: inline-block;
        }

        .button.cancel {
          display: inline-block;
        }
      }

      tr.fade-out {
        opacity: 0;
        transition: opacity 0.5s ease;
      }
    }
  }
}

@keyframes fading {
  0% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 0.1;
  }
}