@import 'variables';

$color-tip-bg: $color-grey-very-light;
$color-tip-border: map-get($green, 'lighten-1');

$color-warning-bg: map-get($yellow, 'lighten-4');
$color-warning-border: map-get($yellow, 'darken-2');
$color-warning-title: map-get($lime, 'darken-4');
$color-warning-text: map-get($brown, 'darken-1');

$color-danger-bg: map-get($red, 'lighten-5');
$color-danger-border: map-get($red, 'darken-4');
$color-danger-title: map-get($red, 'darken-4');
$color-danger-text: map-get($brown, 'darken-3');

$color-details-bg: $color-grey-very-light;

#content {
  .custom-block {

    &.tip, &.warning, &.danger {
      padding: $custom-block-padding-y $custom-block-padding-x;
      border-left-width: $custom-block-padding-x / 3;
      border-left-style: solid;
      margin: $base-margin-y 0;

      .custom-block-title {
        font-weight: bold;
        margin: 0;
      }

      p:last-child {
        margin-top: 0.7em;
        margin-bottom: 0;
      }
    }

    &.tip {
      background-color: $color-tip-bg;
      border-color: $color-tip-border;
    }

    &.warning {
      background-color: $color-warning-bg !important;
      border-color: $color-warning-border !important;
      color: $color-warning-text !important;

      .custom-block-title {
        color: $color-warning-title;
      }
    }

    &.danger {
      background-color: $color-danger-bg;
      border-color: $color-danger-border;
      color: $color-danger-text;

      .custom-block-title {
        color: $color-danger-title;
      }
    }

    &.details {
      display: block;
      position: relative;
      margin: $base-margin-y 0;
      padding: $custom-block-padding-y $custom-block-padding-x;
      background-color: $color-details-bg;

      summary {
        outline: none;
        cursor: pointer;
      }

      p:first-of-type {
        margin-top: 1em;
      }

      p:last-child {
        margin-bottom: 0;
      }
    }
  }
}