@import 'themes/default';
@import 'themes/bandit';

.Callout {
  $self: &;

  &__Title-Container {
    padding: var(--Callout__Title-Container____padding);
  }

  &__Title {
    // This negative margin prevents the line height of the title content from causing
    // a misalignment with the "flex-start" aligned callout icon
    margin: -0.15em 0;
  }

  &__Detail-Container {
    padding: var(--Callout__Detail-Container____padding);
  }

  &--error {
    background-color: var(--Callout--error____bg-color);
    color: var(--Callout--error____color);
    --Link-Text____underline-color-rgb: var(--Callout--error____color-rgb);

    #{$self}__Icon-Container {
      color: var(--Callout--error____icon-color);
    }

    #{$self}__Detail-Container {
      border-color: var(--Callout--error____border-color);
    }
  }

  &--tip {
    background-color: var(--Callout--tip____bg-color);
    color: var(--Callout--tip____color);
    --Link-Text____underline-color-rgb: var(--Callout--tip____color-rgb);

    #{$self}__Icon-Container {
      color: var(--Callout--tip____icon-color);
    }

    #{$self}__Detail-Container {
      border-color: var(--Callout--tip____border-color);
    }
  }

  &--warning {
    background-color: var(--Callout--warning____bg-color);
    color: var(--Callout--warning____color);
    --Link-Text____underline-color-rgb: var(--Callout--warning____color-rgb);

    #{$self}__Icon-Container {
      color: var(--Callout--warning____icon-color);
    }

    #{$self}__Detail-Container {
      border-color: var(--Callout--warning____border-color);
    }
  }

  &--info {
    background-color: var(--Callout--info____bg-color);
    color: var(--Callout--info____color);
    --Link-Text____underline-color-rgb: var(--Callout--info____color-rgb);

    #{$self}__Icon-Container {
      color: var(--Callout--info____icon-color);
    }

    #{$self}__Detail-Container {
      border-color: var(--Callout--info____border-color);
    }
  }
}