/**
 *
 * Copyright (c) 2023-2024 Analog Devices, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 *
 * 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 "../named-variables";

.navigation-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: flex-end;
  width: calc(100% - 8px);
  height: 2.5rem;
  padding-right: 8px;
  font-size: 11px;
  background: var(--vscode-activityBar-background);

  button {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 4px;
    color: color-mix(in srgb, var(--vscode-icon-foreground), transparent 50%);
    background: var(--vscode-sideBar-background);
    border: 0.5px solid
      color-mix(in srgb, var(--vscode-icon-foreground), transparent 50%);
  }

  button:hover {
    color: color-mix(in srgb, var(--vscode-icon-foreground), transparent 0%);
    cursor: pointer;
    border-color: color-mix(
      in srgb,
      var(--vscode-icon-foreground),
      transparent 0%
    );
  }

  .left-border {
    border-radius: 2.5px 0 0 2.5px;
  }

  .right-border {
    border-radius: 0 2.5px 2.5px 0;
  }

  .navigation-boxes-container {
    display: flex;
    justify-content: flex-start;

    a,
    a:visited,
    a:active {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
      color: color-mix(in srgb, var(--vscode-icon-foreground), transparent 50%);
      background: var(--vscode-sideBar-background);
      border: 0.5px solid
        color-mix(in srgb, var(--vscode-icon-foreground), transparent 50%);
      outline: 0;
    }

    a:hover {
      color: color-mix(in srgb, var(--vscode-icon-foreground), transparent 0%);
      border-color: color-mix(
        in srgb,
        var(--vscode-icon-foreground),
        transparent 0%
      );
    }
  }
}
