/* panel.st.css */
@namespace "Panel";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    mobile,
    --font-family-base,
    --border-radius-special-lg,
    --color-erratum,
    --color-success,
    --color-warning,
    --color-link,
    --color-hint,
    --spacing-unit,
    --color-ui-inverse,
    --color-accent-1,
    color-red,
    color-dark-yellow,
    color-dark-teal;
}

:import {
  -st-from: "../../components/Panel/panel.st.css";
  -st-default: Panel;
}

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

@st-scope Base {
  Panel {
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-base);
    font-weight: 300;
    color: var(--color-hint);
    padding: 28px 25px 52px;
    border-radius: var(--border-radius-special-lg);
    margin-bottom: calc(var(--spacing-unit) * 4);
  }

  Panel a {
    font-weight: 600;
    color: var(--color-link);
  }

  Panel strong {
    font-weight: 600;
  }

  Panel Icon {
    display: block;
    margin-bottom: 21px;
  }

  Panel::textArea {
    line-height: 1.5;
  }

  Panel Icon svg {
    width: 35px;
    height: 35px;
  }

  Panel:display(info) {
    background-color: var(--color-accent-1);
    color: var(--color-ui-inverse);
  }

  Panel:display(info) a {
    color: var(--color-ui-inverse);
    border-bottom: 1px solid var(--color-ui-inverse);
  }

  Panel:display(info) Icon {
    color: var(--color-ui-inverse);
  }

  Panel:display(success) {
    background-color: var(--color-success);
  }

  Panel:display(success) Icon {
    color: value(color-dark-teal);
  }

  Panel:display(warning) {
    background-color: var(--color-warning);
  }

  Panel:display(warning) Icon {
    color: value(color-dark-yellow);
  }

  Panel:display(error) {
    background-color: var(--color-erratum);
  }

  Panel:display(error) Icon {
    color: value(color-red);
  }
}

/** Small devices (mobile, 568px and up) */
@media value(mobile) {
  @st-scope Base {
    Panel {
      flex-direction: row;
      padding: 40px 84px 40px 40px;
    }

    Panel Icon {
      margin-right: 28px;
    }
  }
}