.cosmo-fieldset.is--container {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
}

.cosmo-input__group.is--container {
  padding-top: 1rem;
}

.container-container-group {
  .cosmo-input__header {
    margin-top: 1rem;
  }

  &.is--status {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
  }
}

.container-container-group__list {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
}

.container-container-group__divider {
  margin: 1rem 0 0;
  background: var(--primary-color);
  height: 0.125rem;
}

.container-container-group__add {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  background: none;
  padding: 0;
  border: none;
  align-items: center;
  cursor: pointer;

  &::after,
  &::before {
    content: '';
    width: 100%;
    height: 0.125rem;
    background: var(--primary-color);
    border-radius: 0.125rem;
  }

  svg {
    stroke: var(--primary-color);
    height: 2rem;
    width: 2rem;
    border: 0.125rem solid var(--primary-color);
    border-radius: 1rem;
    padding: 0.125rem;
    transition: all 0.3s;
  }

  &:hover {
    svg {
      stroke: var(--white);
      background: var(--primary-color);
    }
  }
}

.container-key-value {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  grid-column: span 2;
  align-items: center;

  &.is--three-column {
    grid-template-columns: 1fr 1fr auto auto;
  }
}

.container-network {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.container-readonly {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;

  .cosmo-label {
    min-width: unset;
  }
}

.cosmo-tab__content.is--container-config {
  display: grid;
  grid-template-rows: auto 1fr;

  h1 {
    margin: 0;
  }
}

.container-split-view {
  display: grid;
  grid-template-columns: 55rem 1fr;
  grid-template-rows: auto 1fr;
  grid-auto-flow: row;
  align-items: start;
  gap: 0.5rem;
}

.container-config {
  overflow: auto;
  padding-right: 1rem;
  grid-column: 1/2;
  height: calc(
    var(--page-height) - var(--title-font-size) - var(--h1-font-size) - 1.25rem - 1.5rem - 0.5rem -
      var(--control-height)
  );
}

.container-logs {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.5rem;
}

.container-tab {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
  padding-top: 1rem;

  &.is--logs {
    padding-top: 0.25rem;
  }
}

.container-tab__links {
  display: flex;
  flex-flow: row nowrap;
  gap: 0.25rem;
}

.container-tab__link {
  font-size: 1.25rem;
  color: var(--black);
  cursor: pointer;
  display: flex;
  flex-flow: column nowrap;
  padding: 0.25rem 0.5rem 0.125rem;
  border-bottom: 0.125rem solid transparent;
  position: relative;
  transition: border-bottom-color 0.3s;

  &:hover {
    background: var(--primary-color-alpha-15);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-bottom-color: var(--primary-color);
  }

  &.is--active {
    border-bottom-color: var(--primary-color);
  }
}

.container-logs__content {
  display: flex;
  flex-flow: column;
  margin: 0;
  overflow: auto;
  height: calc(
    var(--page-height) - var(--title-font-size) - var(--h1-font-size) - 1.25rem - 1rem - var(--control-height) - 4rem -
      2rem
  );
  width: calc(
    100vw - var(--page-side-spacing) - var(--page-side-spacing) - 55rem - var(--list-items-width) -
      var(--list-spacing) - 0.5rem
  );

  &.is--recurring {
    height: calc(
      var(--page-height) - var(--title-font-size) - var(--h1-font-size) - 1rem - var(--control-height) - 2rem - 4rem
    );
  }
}