@use 'sass:color';

.custom-container {
  .custom-container-title {
    font-weight: 600;
  }

  &.tip,
  &.warning,
  &.danger,
  &.reference {
    padding: 0.01em 1em;
    margin: 1em 0;
    border: 1px solid;
  }

  &.tip {
    .custom-container-title {
      color: var(--tip-color);
    }

    background-color: var(--tip-bg-color);
    border-color: var(--tip-border-color);
  }

  &.warning {
    .custom-container-title {
      color: var(--warning-color);
    }

    background-color: var(--warning-bg-color);
    border-color: var(--warning-border-color);
  }

  &.danger {
    .custom-container-title {
      color: var(--danger-color);
    }

    background-color: var(--danger-bg-color);
    border-color: var(--danger-border-color);
  }

  &.reference {
    background-color: var(--reference-bg-color);
    border-color: var(--reference-border-color);

    p:not(.custom-container-title, :last-child) {
      color: var(--text-secondary-color);
      font-style: italic;
    }

    p:last-child {
      color: var(--text-tertiary-color);
      text-align: right;
    }
  }

  &.details {
    display: block;
    position: relative;
    border-radius: 2px;
    margin: 1em 0;
    padding: 1.5em;
    background-color: var(--deep-bg-color);

    h4 {
      margin-top: 0;
    }

    figure,
    p {
      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
      }
    }

    summary {
      outline: none;
      cursor: pointer;
    }
  }
}