@mixin detail_colors_default($color) {
  color: darken($color, 40%);
  background-color: lighten($color, 25%);
  border-color: $color;
}

@mixin details-color($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  hr {
    border-top-color: darken($border, 5%);
  }

  .alert-link {
    color: darken($color, 10%);
  }
}

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
  @include detail_colors_default($gray-600);
  &.primary, &.important {
    @include details-color(theme-color-level("primary", $alert-bg-level),
      theme-color-level("primary", $alert-border-level),
      theme-color-level("primary", $alert-color-level));
  }
  &.secondary, &.attention {
    @include details-color(theme-color-level("secondary", $alert-bg-level),
      theme-color-level("secondary", $alert-border-level),
      theme-color-level("secondary", $alert-color-level));
  }
  &.success, &.tip {
    @include details-color(theme-color-level("success", $alert-bg-level),
      theme-color-level("success", $alert-border-level),
      theme-color-level("success", $alert-color-level));
  }
  &.info, &.note, &.hint {
    @include details-color(theme-color-level("info", $alert-bg-level),
      theme-color-level("info", $alert-border-level),
      theme-color-level("info", $alert-color-level));
  }
  &.warning, &.caution {
    @include details-color(theme-color-level("warning", $alert-bg-level),
      theme-color-level("warning", $alert-border-level),
      theme-color-level("warning", $alert-color-level));
  }
  &.danger, &.critical {
    @include details-color(theme-color-level("danger", $alert-bg-level),
      theme-color-level("danger", $alert-border-level),
      theme-color-level("danger", $alert-color-level));
  }
  &.light {
    @include details-color(theme-color-level("light", $alert-bg-level),
      theme-color-level("light", $alert-border-level),
      theme-color-level("light", $alert-color-level));
  }
  &.dark {
    @include details-color(theme-color-level("dark", $alert-bg-level),
      theme-color-level("dark", $alert-border-level),
      theme-color-level("dark", $alert-color-level));
  }
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;

}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
  background-color: #FFFFFF;
}
