/* alert.st.css */
@namespace "Alert";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    laptop,
    --color-accent-1,
    --color-accent-4,
    --color-ui-inverse,
    --spacing-unit;
}

:import {
  -st-from: "../../components/Alert/alert.st.css";
  -st-default: Alert;
}

:import {
  -st-from: "../../components/Container/container.st.css";
  -st-default: Container;
}

:import {
  -st-from: "../../components/Icon/icon.st.css";
  -st-default: Icon;
}

:import {
  -st-from: "../../mixins/link.st.css";
  -st-default: Link;
}

:import {
  -st-from: "../../mixins/buttonMixin.st.css";
  -st-default: ButtonMixin;
  -st-named:
    --accent-color,
    --text-color;
}

@st-scope Base {
  Alert {
    display: block;
    position: static;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 300;
    padding-top: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 4);
    /* Declare local vars which can be imported and overridden by the theme. */
    --bg-color: var(--color-accent-4);
    --foreground-color: var(--color-accent-1);
    /* Apply them. */
    background-color: var(--bg-color);
    color: var(--foreground-color)
  }

  Alert Container {
    position: relative;
  }

  Alert::header {
    color: inherit;
    margin-bottom: calc(.45em + 8px);
  }

  Alert::contentText {
    color: inherit;
  }

  Alert::header,
  Alert::contentText {
    max-width: 80%;
  }

  Alert::contentText > a {
    -st-mixin: Link;
    border-bottom-color: var(--foreground-color);
  }

  Alert::contentText > a:not(:focus) {
    color: inherit;
  }

  Alert::buttonAlert {
    /* Gives us a white button but ensure Button tone prop is set to false. */
    --accent-color: var(--foreground-color);
    position: absolute;
    top: 3px;
    /* Focus cuts off */
    right: 50px;
    cursor: pointer;
    border-width: 1px;
    border-radius: 0;
    padding: 0;
  }

  Alert::buttonAlert span {
    line-height: 0;
  }

  Alert::buttonAlert:hover,
  Alert::buttonAlert:focus {
    background-color: transparent;
    border-color: var(--foreground-color);
    color: var(--foreground-color);
  }
}