@use "sass:math";

@import '../generic/variables'; // Altinn variables
@import '../generic/bootstrap-custom';
@import '../../scss-common/generic/mixins';
@import './../../../../../node_modules/bootstrap/scss/mixins';
@import '../../scss-common/base/font';

// ------------------------------------ \
//  GUIDE TEMPLATE
//  Include this file only for EPI content producer manual
//
//  ap (css-prefix) = Altinn Producer
// ------------------------------------ /

body {
  &.ap-profile {
    overflow-x: hidden;
    background: $white;
  }

  &.ap-profile-pattern {
    overflow: hidden;
  }
}

iframe {
  &.ap-showPatternlab {
    width: 100%;
    height: 100vh;
    margin: 0;
    border: none;
  }
}

.ap-navbarLeft-contentContainer {
  @include media-breakpoint-up( md ) {
    margin-left: 300px;
  }
}

.ap-content {
  @include add-col-properties {
    padding-right: $spacer * 0.5;
    padding-left: $spacer * 0.5;
  }

  max-width: 900px;
  padding: $spacer * 2;
  margin: auto;

  @include media-breakpoint-up( md ) {
    margin-top: $spacer * 5;
  }
}

// SIDE NAV FOR ALTINN PROFILE MANUAL
.ap-sideNav {
  display: block;
  width: 100%;
  padding: 0;

  @include media-breakpoint-up( md ) {
    width: $spacer * 25;
  }

  .ap-sideNav-top {
    display: block;
    width: 100%;
    padding: $spacer * 3 $spacer;
    text-align: center;
    border-bottom: 1px solid $grey-light;

    @include media-breakpoint-up( md ) {
      position: fixed;
      top: 0;
      left: 0;
      width: $spacer * 25;
      border-right: 1px solid $grey-light;
    }

    img {
      width: 160px;
      margin: auto;
      margin-bottom: 12px;
    }

    h1 {
      @include a-fontSize16;
      @include a-fontLight;
      margin-bottom: 0;
      color: $grey-medium;
    }
  }

  // Titlebar (Shows only for small screens)
  .ap-sideNav-mobilebar {
    position: relative;
    color: $white;
    cursor: pointer;
    background: $blue-dark;

    @include media-breakpoint-up( md ) {
      display: none !important;
    }

    ::after {
      position: absolute;
      top: 50%;
      right: 1rem;
      display: block;
      width: 0;
      height: 0;
      margin-top: math.div($spacer, -3);
      content: '';
      border: inset $spacer * 0.5;
      border-color: $white transparent transparent;
      border-top-style: solid;
      border-bottom-width: 0;
      transition: all 300ms ease;
    }

    &.open {
      ::after {
        transition: all 300ms ease;
        transform: scaleY(-1);
        transform-origin: 50% 50%;
      }
    }

    .ap-sideNav-mobilebar-toggle {
      display: block;
      padding: $spacer $spacer * 2;

      i {
        margin-top: math.div($spacer, -4);
        margin-right: 7px;
        vertical-align: middle;
      }
    }
  }

  .ap-sideNav-collapse {
    display: none;
    width: 100%;
    height: 100%;
    padding: 0;
    background: $white;

    @include media-breakpoint-up( md ) {
      position: fixed;
      top: 133px;
      display: block !important;
      width: $spacer * 25;
      overflow-y: scroll;
      border-right: 1px solid $grey-light;
    }

    // Active item
    .ap-nav-active {
      background: lighten($grey-light, 4%);
      border-left: $spacer * 0.5 solid $blue-dark;

      .ap-sideNav-link {
        padding: 17px 19px;
      }

      &:hover {
        background: lighten($grey-light, 4%);
        border-left: $spacer * 0.5 solid $blue-dark;

        .ap-sideNav-link {
          padding: 17px 19px;
        }
      }
    }

    ul {
      padding-bottom: 139px + $spacer;
      background: $white;

      // Level 2
      &.nested {
        padding-bottom: 0;
        margin-left: 0;

        li {
          background: $grey-lighter;

          .ap-sideNav-link {
            @include a-fontLight;
            padding: 11px $spacer * 2 11px $spacer * 3;
            border-top: 1px solid transparent;
            border-bottom: 1px solid $white;
          }

          &:last-child {
            border-bottom: 1px solid $white;
          }

          &:first-child {
            z-index: 1000;
            margin-top: -1px;
          }

          &.ap-nav-active {
            background: lighten( $grey-light, 2% );

            .ap-sideNav-link {
              padding: 11px $spacer * 2 11px 30px;
            }

            &:hover,
            &:focus {
              background: lighten( $grey-light, 2% );

              .ap-sideNav-link {
                padding: 11px $spacer * 2 11px 30px;
              }
            }
          }
        }
      }
    }

    .menu>li>a {
      text-decoration: none;
    }

    //Link
    .ap-sideNav-link {
      @include a-fontReg;
      display: block;
      padding: 17px $spacer * 2;
      color: $black;
      border-bottom: 1px solid $grey-light;

      &:hover,
      &:active,
      &:focus {
        background: $grey-light;
      }

      &.nav-link-hassub {
        border: none;
      }

      .a-icon {
        color: $grey-medium;
      }
    }
  }

  // ARROW
  .is-accordion-submenu-parent {
    > a {
      &::after {
        right: $spacer * 2;
        border-color: $grey-medium transparent transparent;
      }
    }
  }
}

// Content next to sidenav
@include media-breakpoint-down( md ) {
  .ap-collapse-content {
    position: absolute;
    width: 0%;
    height: 100%;
    overflow: hidden;
  }
}

.a-icon-right {
  display: inline;
}

// sass-lint:disable-all

@font-face {
  font-family: "anchorjs-icons";
  font-style: normal;
  font-weight: normal;
  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBTUAAAC8AAAAYGNtYXAWi9QdAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zgq29TcAAAF4AAABNGhlYWQEZM3pAAACrAAAADZoaGVhBhUDxgAAAuQAAAAkaG10eASAADEAAAMIAAAAFGxvY2EAKACuAAADHAAAAAxtYXhwAAgAVwAAAygAAAAgbmFtZQ5yJ3cAAANIAAAB2nBvc3QAAwAAAAAFJAAAACAAAwJAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpywPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6cv//f//AAAAAAAg6cv//f//AAH/4xY5AAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACADEARAJTAsAAKwBUAAABIiYnJjQ/AT4BMzIWFxYUDwEGIicmND8BNjQnLgEjIgYPAQYUFxYUBw4BIwciJicmND8BNjIXFhQPAQYUFx4BMzI2PwE2NCcmNDc2MhcWFA8BDgEjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAEAAAABAACiToc1Xw889QALBAAAAAAA0XnFFgAAAADRecUWAAAAAAJTAsAAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAAlMAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAACAAAAAoAAMQAAAAAACgAUAB4AmgABAAAABQBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIABwCfAAEAAAAAAAMADgBLAAEAAAAAAAQADgC0AAEAAAAAAAUACwAqAAEAAAAAAAYADgB1AAEAAAAAAAoAGgDeAAMAAQQJAAEAHAAOAAMAAQQJAAIADgCmAAMAAQQJAAMAHABZAAMAAQQJAAQAHADCAAMAAQQJAAUAFgA1AAMAAQQJAAYAHACDAAMAAQQJAAoANAD4YW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("truetype");
}

.ap-navbarLeft-contentContainer {
  .a-anchor {
    border-bottom: none !important
  }
  .a-anchor:after {
    content: attr(data-anchorjs-icon) !important;
    opacity: 0 !important;
    font-family: anchorjs-icons;
    transform: scale(0.67) !important;
    -webkit-transform: scale(0.67) !important;
    display: inline-block !important;
  }
  .a-anchor:hover:after {
    opacity: 1 !important;
  }
}