/*
 * Copyright 2017-2020 IBM Corporation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import "SidecarCommon.css";
@import "../../scss/components/Navigation/common";

.kui--sidecar.visible.kui--nav-view {
  .kui--sidecar-content {
    width: 70%;
  }

  .sidecar-bottom-stripe-left-bits {
    display: none;
  }

  .kui--sidecar-header-and-body {
    font-size: 0.875rem;
  }

  .sidecar-bottom-stripe {
    transition: none;

    .sidecar-bottom-stripe-right-bits {
      /* filler in the window stripe to fill with the content column */
      flex: 1;
      justify-content: flex-end;
    }

    .kui--sidecar--titlebar-navigation {
      /* filler in the window stripe to fill with the sidenav column */
      background-color: var(--color-sidecar-header);
      margin: 0;
      border: none;
    }
  }

  /* tables in sidecar */
  .result-table-outer,
  .kui--data-table-wrapper,
  .bx--data-table {
    width: 100%;
  }
  .bx--data-table.result-table[kui-table-style] th.header-cell {
    color: var(--color-text-01);
  }
  .row-selection-context:not(.selected-row) .selected-entity svg path {
    /* radio buttons in tables */
    fill: var(--color-text-01) !important;
  }
  .result-table-title-outer {
    /* table titles */
    color: var(--color-base0C);
  }
}

.kui--sidecar .bx--data-table {
  white-space: normal;
}

.kui--sidecar-header-and-body {
  .bx--tabs {
    display: flex;
    background-color: var(--color-sidecar-header);
    border-bottom: 1px solid var(--color-sidecar-background-02);
  }

  .bx--tab-content {
    /* TODO    @extend .full-height; */
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;

    /* carbon override */
    padding: 0;

    &[aria-hidden="true"] {
      display: none;
    }
  }

  .kui--sidecar-content {
    display: flex;
    flex: 1;
    background-color: var(--color-background);
    color: var(--color-text-01);
    padding: 0;

    .bx--data-table-container {
      flex: 1;
      padding: 0;

      .bx--data-table {
        td span {
          word-break: break-word;
        }
      }
    }

    .hide-with-sidecar {
      display: none;
    }
  }

  .bx--snippet {
    & {
      background: var(--color-sidecar-background-02);
      border-color: transparent;
      color: var(--color-text-01);
      min-width: 20rem;
      font-family: var(--font-monospace);
    }

    &.bx--snippet--single {
      &:after {
        display: none;
      }
      .bx--snippet-container {
        &:focus {
          outline-color: var(--color-brand-03);
        }

        code {
          pre {
            font-family: unset;

            &:after {
              display: none;
            }
          }
        }
      }
    }

    code {
      font-family: unset;
      font-size: unset;
      pre {
        font-size: unset;
        --color-selection-background: var(--color-base0C);
      }
    }

    &.bx--snippet--multi {
      .bx--snippet-container {
        code {
          pre {
            white-space: pre-wrap;

            &:after {
              display: none;
            }
          }
        }
      }
    }

    .bx--snippet__icon {
      fill: var(--color-text-01);
    }
  }
}

.minimized [data-view-id] > div:not(.sidecar-bottom-stripe) {
  display: none !important;
}

.kui--sidecar.visible.maximized {
  flex-basis: 100%;
}

[kui-theme-style] .bx--copy-btn {
  border-color: transparent;
  background-color: transparent;
  font-family: var(--font-sans-serif);

  &:hover {
    background-color: var(--color-base00);
  }

  &:focus {
    outline-color: var(--color-brand-03);
  }

  .bx--copy-btn__feedback {
    font-size: inherit;
    background-color: var(--color-base03);
  }
}
