// Primer CSS
// Custom Build, including only a subset of Primer's features

// Set custom variable values first
// Heading sizes - mobile
// h4-h6 remain the same size on both mobile & desktop
$h00-size-mobile: 40px;
$h0-size-mobile: 36px;
$h1-size-mobile: 28px;
$h2-size-mobile: 24px;
$h3-size-mobile: 22px;
// Heading sizes - desktop
$h00-size: 48px;
$h0-size: 44px;
$h1-size: 36px;
$h2-size: 26px;
$h3-size: 22px;
$h4-size: 20px;
$h5-size: 18px;
$h6-size: 16px;

// Core Definitions
@import "@primer/css/color-modes/index.scss";
@import "@primer/css/support/index.scss";
@import "@primer/css/base/index.scss";

// Import the individual Components I want
@import "@primer/css/buttons/index.scss";
@import "@primer/css/forms/form-control.scss";
@import "@primer/css/labels/index.scss";
@import "@primer/css/table-object/index.scss";
@import "@primer/css/dropdown/dropdown.scss";
@import "@primer/css/toasts/toasts.scss";

// Utilities should be imported after Components
@import "@primer/css/utilities/margin.scss";
@import "@primer/css/utilities/padding.scss";
@import "@primer/css/utilities/details.scss";
@import "@primer/css/utilities/typography.scss";

// My fixes go here, after the Components they're fixing
.input-lg { height: 36px; line-height: 24px; min-width: 48px; }
.Toast { margin: 20px 4px; }
.Toast-icon { max-width: 8%; }
.Toast-content {
    h3 {
        padding-top: 0;
    }
    p:last-child {
        margin-bottom: 0;
    }
}

// My own custom Primer Components go here
@import "support.scss";
@import "custom-components.scss";
