.channels-header {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;

  h1 {
    margin-right: auto;
    font: var(--default-font-h1);
  }

  .buttons {
    display: flex;
    flex-flow: row wrap;
    gap: 12px;
    justify-content: flex-end;

    height: 36px;
  }
}

.channels-list {
  display: flex;
  flex-flow: column nowrap;

  .channel {
    cursor: default;

    position: relative;

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;

    max-width: 600px;

    .channel-icon {
      display: flex;
      align-items: center;
      justify-content: center;

      margin: 8px 16px 8px 24px;
      padding: 12px;

      &::after {
        content: '';

        position: absolute;

        display: block;

        width: 48px;
        height: 48px;

        background-color: rgb(9 30 66 / 8%);
        border-radius: 48px;
      }
    }

    .channel-content {
      display: flex;
      flex-flow: column nowrap;
      align-items: flex-start;
      justify-content: center;

      .content-header {
        overflow: hidden;

        margin: 0 0 2px;

        font-size: 0.857143em;
        font-weight: 600;
        font-style: inherit;
        line-height: 1.33333;
        color: #5f6d85;
        text-align: left;
        text-transform: uppercase;
      }

      .content-link {
        overflow: hidden;

        max-width: 510px;
        margin: 0;

        font-size: 1em;
        font-weight: 400;
        font-style: inherit;
        line-height: 1.14286;
        color: var(--theme-hack-color, var(--sdesk-text-color), #182c4b);
        text-align: left;
        text-overflow: ellipsis;
        letter-spacing: -0.003em;
        white-space: nowrap;
      }
    }

    .content-button {
      position: absolute;
      right: 0;

      display: flex;
      flex-flow: row wrap;
      align-items: center;

      height: 100%;

      visibility: hidden;

      transition: visibility 0.2 ease;
    }

    &:hover {
      .content-button {
        visibility: visible;
      }
    }
  }
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}