/* = Project info and vars. */
:import {
  -st-from: "./project.st.css";
  -st-default: StudyUK;
  -st-named:
    --svg-arrow-right,
    --suk-indigo,
    --color-accent-1,
    --font-family-base;
}

/* Colors from base vars. */
:import {
  -st-from: "../base/project.st.css";
  -st-named:
    --color-ui-inverse;
}

:import {
  -st-from: "../../formatters/calcLineHeight";
  -st-default: calcLineHeight;
}

/* CSS API from component directory. */
:import {
  -st-from: "../../components/Button/button.st.css";
  -st-default: Button;
}

:import {
  -st-from: "../../components/Chip/chip.st.css";
  -st-default: Chip;
  -st-named: chipButton;
}

:import {
  -st-from: "../../components/FilmArchive/filmarchive.st.css";
  -st-default: FilmArchive;
  -st-named: buttonIconList;
}

@st-scope StudyUK {
  Button {
    font-family: var(--font-family-base);
    font-weight: 600;
    line-height: calcLineHeight(16, 24);
  }

  Button:variant(primary):not(.chipButton):not(.buttonIconList) {
    background-color: var(--suk-indigo);
  }

  Button:variant(secondary):not(.chipButton):not(.buttonIconList) {
    background-color: var(--color-accent-1);
    color: var(--color-ui-inverse);
  }

  Button:variant(primary):not(.chipButton):not(.buttonIconList),
  Button:variant(secondary):not(.chipButton):not(.buttonIconList) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'></line><polyline points='12 5 19 12 12 19'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 24px;
    padding: 12px 40px 12px 12px;
    border-radius: 8px;
    transition: 0.2s ease-in-out all
  }

  Button:variant(primary):hover:not(.chipButton):not(.buttonIconList) {
    border-color: var(--suk-indigo);
  }

  Button:variant(secondary):hover:not(.chipButton):not(.buttonIconList) {
    border-color: var(--color-accent-1);
  }

  Button:variant(primary):focus:not(:disabled),
  Button:variant(secondary):focus:not(:disabled),
  Button:variant(primary):hover:not(:disabled),
  Button:variant(secondary):hover:not(:disabled) {
    color: var(--color-ui-inverse);
    background-position: right 6px center;
  }
}