.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;

  .header {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 8px;
    align-items: center;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--mantine-color-text-7);
    width: 100%;

    .input {
      width: 1%;
      flex-grow: 1;
      flex-shrink: 1;
    }

    .add {
      flex-shrink: 0;
    }
  }

  .bar {
    flex-shrink: 0;
    width: 100%;
    padding-bottom: 8px;
    padding-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 2px solid var(--mantine-color-text-7);

    .add {
      padding-left: 24px;
      padding-right: 24px;
    }
  }

  .none {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 32px;
  }

  .channels {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: 100%;
    overflow: auto;
    overscroll-behavior: none;

    .channel {
      width: 100%;
      height: 48px;
      border-bottom: 1px solid var(--mantine-color-text-8);

      &:hover {
        background: var(--mantine-color-surface-4);
      }
    }
  }
}

.addContainer {
  display: flex;
  flex-direction: column;
  gap: 16px;

  .members {
    padding-left: 4px;
    font-size: 12px;
    color: var(--mantine-color-text-6);
  }

  .addMembers {
    width: 100%;
    min-height: 128px;
    max-height: 256px;
    background: var(--mantine-color-surface-0);
    overflow: scroll;
    border: 1px solid var(--mantine-color-text-8);
    border-radius: 2px;

    .noContacts {
      display: flex;
      width: 100%;
      height: 128px;
      align-items: center;
      justify-content: center;

      .noContactsLabel {
        color: var(--mantine-color-text-6);
      }
    }

    .card {
      width: 100%;
      height: 48px;
      padding-top: 8px;
      padding-bottom: 8px;
      padding-right: 16px;
      padding-left: 16px;
      border-bottom: 1px solid var(--mantine-color-text-8);
    }
  }

  .addControls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;

    .addSealed {
      flex-grow: 1;
    }
  }
}
