import { css } from 'styled-components';

export const banner = css`
  /**
  * @tokens Banner
  */
  --banner-height: 0px; /* default 0px so calc formulas work on page load */
  --banner-button-size: 22px;
  --banner-button-padding: 3px; // @presenter Spacing
  --banner-button-font-size: var(--font-size-base);
  --banner-button-border-radius: var(--border-radius);
  --banner-button-padding-inline: 1px var(--spacing-sm);
  --banner-button-line-height: var(--line-height-base); // @presenter LineHeight
  --banner-button-icon-size: 14px;
  --banner-button-icon-padding: 5px; // @presenter Spacing
  --banner-button-icon-left-padding: 1px var(--spacing-sm) 1px 10px; // @presenter Spacing
  --banner-button-icon-right-padding: 1px 10px 1px var(--spacing-sm); // @presenter Spacing
  --banner-button-margin: 0 var(--spacing-xs); // @presenter Spacing
  --banner-padding: var(--spacing-xs); // @presenter Spacing
  --banner-link-decoration: var(--link-decoration-hover);
  --banner-min-height: 38px;
  --banner-gap: var(--spacing-xxs); // @presenter Spacing

  --banner-info-bg-color: var(--color-info-base); // @presenter Color
  --banner-info-text-color: var(--color-static-white); // @presenter Color
  --banner-info-icon-color: var(--color-static-white); // @presenter Color
  --banner-info-link-color: var(--banner-info-text-color); // @presenter Color

  --banner-success-bg-color: var(--color-success-base); // @presenter Color
  --banner-success-text-color: var(--color-static-white); // @presenter Color
  --banner-success-icon-color: var(--color-static-white); // @presenter Color
  --banner-success-link-color: var(--banner-success-text-color); // @presenter Color

  --banner-warning-bg-color: var(--color-warning-base); // @presenter Color
  --banner-warning-text-color: var(--color-black); // @presenter Color
  --banner-warning-icon-color: var(--color-black); // @presenter Color
  --banner-warning-link-color: var(--banner-warning-text-color); // @presenter Color

  --banner-error-bg-color: var(--color-error-base); // @presenter Color
  --banner-error-text-color: var(--color-static-white); // @presenter Color
  --banner-error-icon-color: var(--color-static-white); // @presenter Color
  --banner-error-link-color: var(--banner-error-text-color); // @presenter Color
`;