// Variables

$handorgel-border-color: #eee !default;
$handorgel-border-width: 1px !default;

$handorgel__header__button-background-color: #fff !default;
$handorgel__header--open__button-background-color: #eee !default;
$handorgel__header--focus__button-background-color: #dfdfdf !default;

$handorgel__header__button-padding: 20px 24px !default;
$handorgel__content__inner-padding: 20px 24px !default;

$handorgel__content-background: #fff !default;

// Variables for closing transition

$handorgel__content-transition-opacity-time: 0.1s !default;
$handorgel__content-transition-opacity-method: ease !default;

$handorgel__content-transition-height-time: 0.1s !default;
$handorgel__content-transition-height-delay: $handorgel__content-transition-opacity-time !default;
$handorgel__content-transition-height-method: ease !default;

$handorgel__header__button-transition-background-color-time: 0.2s !default;
$handorgel__header__button-transition-background-color-method: ease !default;

$handorgel__content-transition: height $handorgel__content-transition-height-time
  $handorgel__content-transition-height-method $handorgel__content-transition-height-delay !default;

$handorgel__header__button-transition: background-color
  $handorgel__header__button-transition-background-color-time
  $handorgel__header__button-transition-background-color-method !default;

$handorgel__content__inner-transition: opacity $handorgel__content-transition-opacity-time
  $handorgel__content-transition-opacity-method !default;

// Variables for opening transition

$handorgel__content--open-transition-height-time: 0.2s !default;
$handorgel__content--open-transition-height-method: ease !default;

$handorgel__content--open-transition-opacity-time: 0.3s !default;
$handorgel__content--open-transition-opacity-method: ease !default;

$handorgel__content--open-transition: height $handorgel__content--open-transition-height-time
  $handorgel__content--open-transition-height-method !default;

$handorgel__content--opened__inner-transition: opacity
  $handorgel__content--open-transition-opacity-time
  $handorgel__content--open-transition-opacity-method !default;

.handorgel {
  & {
    display: block;
    width: 100%;
    border: $handorgel-border-width solid $handorgel-border-color;
    border-top: none;
  }

  &__header {
    display: block;
    margin: 0;
  }

  &__header--open &__header__button {
    background-color: $handorgel__header--open__button-background-color;
  }

  &__header--notransition &__header__button {
    transition: none;
  }

  &__header--focus &__header__button {
    background-color: $handorgel__header--focus__button-background-color;
    outline: none;
  }

  &__header__button {
    display: block;
    width: 100%;
    padding: $handorgel__header__button-padding;
    margin: 0;
    border: none;
    border-top: $handorgel-border-width solid $handorgel-border-color;
    background-color: $handorgel__header__button-background-color;
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    font-size: inherit;
    text-align: left;
    transition: $handorgel__header__button-transition;
    user-select: none;

    &::-moz-focus-inner {
      border: 0;
    }
  }

  &__content {
    display: none;
    overflow: hidden;
    height: 0;
    border-top: $handorgel-border-width solid $handorgel-border-color;
    background-color: $handorgel__content-background;
    transition: $handorgel__content-transition;

    &--open {
      display: block;
      transition: $handorgel__content--open-transition;
    }

    &--opened {
      overflow: visible;
    }

    &--notransition {
      transition: none;
    }
  }

  &__content__inner {
    padding: $handorgel__content__inner-padding;
    opacity: 0;
    transition: $handorgel__content__inner-transition;
  }

  &__content--opened &__content__inner {
    opacity: 1;
    transition: $handorgel__content--opened__inner-transition;
  }
}