.Callout {
  $this: &;

  align-items: center;
  background: $color-gray-140;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;

  &__container {
    display: flex;
  }

  &__icon-left {
    margin-top: 1px;
    margin-right: 8px;

    svg {
      fill: $color-gray-00;
    }
  }

  &__text {
    @extend .Font__body--10;
    @extend .Font__color--text;

    flex: 1;
  }

  &__rightElement {
    align-self: start;
    margin-left: 8px;
  }

  // Size variants

  &--size-large {
    padding: 16px;

    #{$this}__text {
      @extend .Font__body--20;
    }
  }

  // Type variants

  &--type-informational {
    background: $color-blue-lighter;

    #{$this}__text {
      color: $color-blue-text;
    }

    #{$this}__icon-left {
      svg {
        fill: $color-blue-text;
      }
    }

    #{$this}__icon-left--color {
      svg {
        fill: $color-blue;
      }
    }
  }

  &--type-warning {
    background: $color-orange-lighter;

    #{$this}__text {
      color: $color-orange-text;
    }

    #{$this}__icon-left {
      svg {
        fill: $color-orange-text;
      }
    }

    #{$this}__icon-left--color {
      svg {
        fill: $color-orange;
      }
    }
  }

  &--type-active {
    // Background color doesn't change for active

    #{$this}__text {
      color: $color-indigo;
    }

    // Icon doesn't change color for active when iconColor is "black"

    #{$this}__icon-left--color {
      svg {
        fill: $color-indigo;
      }
    }
  }

  &--type-success {
    background: $color-green-lighter;

    #{$this}__text {
      color: $color-green-text;
    }

    #{$this}__icon-left {
      svg {
        fill: $color-green-text;
      }
    }

    #{$this}__icon-left--color {
      svg {
        fill: $color-green;
      }
    }
  }

  &--type-error {
    background: $color-red-lighter;

    #{$this}__text {
      color: $color-red-text;
    }

    #{$this}__icon-left {
      svg {
        fill: $color-red-text;
      }
    }

    #{$this}__icon-left--color {
      svg {
        fill: $color-red;
      }
    }
  }
}