@import "../base/colors";
@import "../base/variables";

$width-menu-item: 12em;
$height-menuitem-underline: 3px;

.h5p-sdk {
  .navbar {
    border: 0.042em solid $c2;
    background-color: $c3;
    list-style: none;
    color: $text-dark;
    margin: 0 0 $gutter 0;
    font-size: $text-body-small;
    padding: $gutter;
    overflow: auto;

    .navbar-brand {
      float: left;
      font-size: 1.250em;
    }

    .navbar-toggler {
      cursor: pointer;
      background: none;
      border: 0;
    }

    .navbar-toggler-right {
      float: right;
    }

    .collapsed {
      display: none;
    }

    &.deactivated {
      .menuitem-underline {
        visibility: hidden;
      }

      [role="menuitem"] {
        &[aria-selected="true"] {
          font-weight: 400;
        }
      }
    }

    [role="menuitem"] {
      box-sizing: border-box;
      padding: $gutter;
      text-align: right;
      outline-color: $ac1;
      cursor: pointer;
      border-bottom: solid 1px rgba(206, 214, 227, 0.34);

      &[aria-selected="true"] {
        font-weight: bold;
      }
    }
  }
}