.odc-topology {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  &__layout-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 var(--pf-global--spacer--sm);
  }

  &__layout-button {
    .pf-topology-control-bar__button.pf-c-button {
      border-radius: 0;
      margin-right: 0;

      &:focus {
        z-index: 10;
        color: var(--pf-global--active-color--400);
      }

      &.pf-m-active {
        background-color: var(--pf-global--Color--light-300);
        color: var(--pf-global--icon--Color--dark	);
      }

      &:hover {
        z-index: 20;
        color: var(--pf-global--active-color--400);
        &.pf-m-active {
          color: var(--pf-global--icon--Color--dark	);
        }
      }
    }

    &:first-of-type {
      .pf-topology-control-bar__button.pf-c-button {
        border-radius: var(--pf-global--BorderRadius--sm) 0 0 var(--pf-global--BorderRadius--sm);
      }
    }

    &:last-of-type {
      .pf-topology-control-bar__button.pf-c-button {
        border-radius: 0 var(--pf-global--BorderRadius--sm) var(--pf-global--BorderRadius--sm) 0;
      }
    }

    &__icon {
      margin-right: var(--pf-global--spacer--xs);
    }
  }

  &__shortcuts-button {
    margin-right: var(--pf-global--spacer--2xl);
  }

  // WORKAROUND: see https://github.com/patternfly/patternfly-react/issues/3312
  .pf-topology-container__with-sidebar {
    flex: 1;
  }
}
