$font-size: 0.875rem;

.kui--status-stripe {
  display: flex;
  flex-basis: 2.25rem;
  background-color: var(--color-sidecar-header);

  --color-fg: var(--color-text-01);

  z-index: 10;
  box-shadow: 0 -1px 0px 0px rgba(175, 175, 175, 0.1);

  .kui--status-stripe-element a.clickable,
  .kui--status-stripe-icon > div {
    /* wrappers around clickable svgs */
    display: flex;
    align-items: center;
  }

  .kui--status-stripe-element {
    color: var(--color-fg);
  }
  .kui--status-stripe-element svg {
    fill: var(--color-fg);
  }
  .kui--status-stripe-element[data-view="obscured"] {
    color: var(--color-text-02);
  }
  .kui--status-stripe-element[data-view="obscured"] svg {
    fill: var(--color-text-02);
  }
  .kui--status-stripe-element[data-view="ok"] svg {
    fill: var(--color-green);
  }
  .kui--status-stripe-element[data-view="warn"] svg {
    fill: var(--color-yellow-sidecar);
  }
  .kui--status-stripe-element[data-view="error"] svg {
    fill: var(--color-error);
  }
  .kui--status-stripe-element[data-view="hidden"] {
    display: none;
  }

  & > div {
    display: flex;
  }

  .kui--status-stripe-element.kui--status-stripe-element-clickable:hover,
  .kui--status-stripe-button .kui--status-stripe-element:hover {
    &:not(.kui--status-stripe-tag-element) {
      cursor: pointer;
      background-color: var(--color-table-border3);
    }
  }

  .kui--status-stripe-tag-element .kui--tag:hover {
    cursor: pointer;
    filter: brightness(1.15); /* TODO */
  }

  .kui--status-stripe-context {
    flex: 1;
    font-size: $font-size;

    .kui--status-stripe-element {
      padding-left: calc(1rem * 0.875 / 0.75);
      padding-right: 1rem;
    }
    .kui--status-stripe-element:not(:first-child) {
      border-left: 1px solid var(--color-table-border3);
      padding-left: 1rem;
    }
    .kui--status-stripe-element:last-child {
      border-right: 1px solid var(--color-table-border3);
    }
  }
  .kui--status-stripe-meter {
    font-size: $font-size;
    padding-left: 1rem;
    .kui--status-stripe-element {
      padding-right: 1rem;
      padding-left: 1rem;
      border-left: 1px solid var(--color-table-border3);
      border-right: 1px solid var(--color-table-border3);

      &.kui--status-stripe-tag-element {
        padding-left: 0;
        border-left: none;
        &:not(:last-child) {
          border-right: none;
        }
      }
    }
  }

  .kui--status-stripe-right {
    justify-content: flex-end;
  }

  .kui--status-stripe-element {
    display: flex;
    align-items: center;
  }

  .kui--status-stripe-element > a {
    /* see https://github.com/IBM/kui/issues/3489 */
    display: flex;
    align-items: center;
  }

  .clickable {
    color: var(--color-fg);
    text-decoration: none;
  }

  .kui--status-stripe-element .clickable:hover {
    color: var(--color-brand-01);
    text-decoration: none;
  }

  .kui--status-stripe-button {
    font-size: $font-size;
  }

  .kui--status-stripe-button .kui--status-stripe-element {
    padding: 0 1rem;
  }

  .kui--status-stripe-icon {
    opacity: 0.875;
  }

  /* tab completions in status stripe input element */
  .kui--input-stripe .repl-block .kui--tab-completions {
    bottom: 1.875rem;
    left: 0;
    background-color: var(--color-sidecar-background-01);
    border-bottom: 1px solid var(--color-table-border3);
    z-index: 100;

    .kui--tab-completions--option .bx--btn--primary:focus {
      border-radius: 4px 4px 0px 0px;
    }
  }
}
