.project-role-assign {
  padding-right: 75px;

  .header {
    font: var(--default-header-font);
  }
}

.button-back {
  width: 24px;

  app-cmf-doodle-icon {
    display: flex;
  }
}

.project-role-assign-list {
  margin-top: 40px;

  .toolbar {
    display: flex;
    justify-content: space-between;

    .filter {
      display: flex;
      gap: 15px;

      wg-cmf-input-search {
        width: 320px;
      }

      wg-dropdown-selector,
      .chevron-icon,
      .roles-select {
        display: flex;
        align-items: center;
      }

      .roles-select {
        cursor: pointer;

        gap: 5px;

        width: 100%;
        height: 100%;
        padding: 5px 10px;

        background-color: var(--theme-hack-bg2-color, var(--color-gray-eee));
        border-radius: 5px;

        &.selected {
          background-color: var(--ds-background-selected);
        }
      }
    }
  }

  .table {
    margin-top: 35px;

    .table-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 100px;
      gap: 10px;
    }

    .table-header {
      margin-bottom: 4px;
      padding-bottom: 3px;
      border-bottom: var(--menu-border-color);

      .header-cell {
        display: flex;

        &:hover .icon-sort {
          visibility: visible;
        }
      }

      .icon-sort {
        cursor: pointer;

        display: flex;
        align-items: center;

        margin-left: 5px;

        visibility: hidden;

        transition: visibility 1s;
      }
    }

    .table-item {
      padding: 4px 0;

      .table-cell,
      .avatar {
        display: flex;
        align-items: center;
      }

      .table-cell {
        min-height: 36px;
      }

      .avatar {
        margin: 0 5px;
      }

      .member-name {
        padding-left: 5px;
      }

      .delete-button {
        cursor: pointer;
        color: var(--color-href);
      }
    }

    .table-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;

      margin-top: 4px;
      padding: 5px 45px 10px 10px;

      border-top: var(--menu-border-color);

      .table-count {
        color: var(--color-gray-888);
      }

      .table-paginator {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .page-number {
          cursor: pointer;
          padding: 2px 5px;

          &.selected {
            font-weight: 600;
            color: var(--color-href);
          }
        }

        .paginator-element {
          cursor: pointer;
          padding: 2px 5px;

          &:last-child {
            padding-right: 0;
          }
        }

        app-cmf-doodle-icon {
          display: flex;
        }
      }
    }
  }
}

:host .project-role-assign-list ::ng-deep wg-cmf-input-search .search-field {
  height: 100%;
  border-color: var(--color-gray-aaa);
}