@import (reference) "nav-frontend-core/less/_variabler";
@import (reference) "nav-frontend-chevron-style/src/mixins";
@import (reference) "nav-frontend-paneler-style/src/mixins";
@import (reference) "nav-frontend-typografi-style/src/index";

.ReactCollapse--collapse {
  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ekspanderbartPanel {
  .panel-focushover-mixin();

  background: white;
  border-radius: 0.25rem;

  &__hode {
    .panel-mixin();

    background: transparent;
    border: 0;
    text-align: left;
    width: 100%;
    margin-bottom: 0;

    .ekspanderbartPanel__tittel {
      .typo-undertittel-mixin();

      color: @navMorkGra;
    }

    &:hover,
    &--hover {
      cursor: pointer;

      .ekspanderbartPanel__tittel {
        text-decoration: underline;
        color: @navBla;
      }
    }

    &:focus,
    &--focus {
      box-shadow: 0 0 0 3px @fokusFarge;
      outline: none;
    }
  }

  &__flex-wrapper {
    // Safari ~9 bug, button/fieldset kan ikke ha flex
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__innhold {
    padding: 1rem;
    padding-top: 0.5rem;
  }

  &--lukket {
    .ekspanderbartPanel__indikator {
      .chevron-mixin();
      .chevron-orientasjon-mixin(ned);
    }
  }

  &--border {
    .panel-interaktiv-mixin();

    &.ekspanderbartPanel--apen {
      border: 1px solid @navGra60;
    }
  }

  &--apen {
    > .ekspanderbartPanel__hode {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .ekspanderbartPanel__innhold {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    > .ekspanderbartPanel__hode .ekspanderbartPanel__indikator {
      .chevron-mixin();
      .chevron-orientasjon-mixin(opp);
    }
  }
}