#acl-index-page {
  #content-card {
    background-color: var(--surface-default-modal);
    border-radius: 15px;
    box-sizing: border-box;
    padding: var(--spacing-s);
    border-top-left-radius: 0;

    & > div {
      & > header {
        width: 100%;
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: flex-start;
        column-gap: var(--spacing-xs);
        padding-bottom: var(--spacing-m);

        & > .controls {
          margin-left: auto;
          display: flex;
          flex-flow: row;
          align-items: center;
          justify-content: flex-end;
          column-gap: var(--spacing-s);

          .btn.filter {
            svg path {
              @include animate-standard;
              transition-property: fill;
              fill: var(--text-button-primary);
            }

            &:hover {
              svg path {
                fill: var(--surface-main-primary);
              }
            }
          }
        }
      }
    }

    .divider-header {
      padding-bottom: var(--spacing-s);

      .inner {
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: flex-start;
        border-bottom: 1px solid var(--border-primary);
      }

      .header {
        @include typography(app-side-bar);
      }
    }
  }

  .page-content {
    & > header {
      padding-bottom: var(--spacing-l);
    }
  }

  .no-data {
    @include typography(app-side-bar);
    color: var(--text-body-tertiary);
    margin: var(--spacing-s) 0;
  }
}

#acl-index-page {
  .acl-list {
    width: 100%;

    &:not(:last-child) {
      padding-bottom: var(--spacing-s);
    }

    .header-track {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: flex-start;
      column-gap: var(--spacing-xs);
      padding-bottom: var(--spacing-xs);

      .select-cell {
        width: 40px;
        height: 22px;
        display: inline-flex;
        flex-flow: row;
        align-items: center;
        justify-content: center;

        .interaction-box {
          width: 18px;
          height: 18px;
        }
      }
    }
  }
}
