Phone1st Classes

//variables color
dark-gray - color: $dark-gray;
medium-gray - color: $medium-gray;
light-gray - color: $light-gray;
font-color - color: $font-color;
link-color - color: $link-color;
hover-color - color: $hover-color;

black - color: $black;
white - color: $white;
first - color: $first-color;
second - color: $second-color;

error-color - color: $error-color;
alert-color - color: $alert-color;
success-color - color: $success-color;

//black
black95 - color: $black-95;
black90 - color: $black-90;
black85 - color: $black-85;
black80 - color: $black-80;
black75 - color: $black-75;
black70 - color: $black-70;
black65 - color: $black-65;
black60 - color: $black-60;
black55 - color: $black-55;
black50 - color: $black-50;
black45 - color: $black-45;
black40 - color: $black-40;
black35 - color: $black-35;
black30 - color: $black-30;
black25 - color: $black-25;
black20 - color: $black-20;
black15 - color: $black-15;
black10 - color: $black-10;
black5 - color: $black-5;

//first color
first95 - color: $first-95;
first90 - color: $first-90;
first85 - color: $first-85;
first80 - color: $first-80;
first75 - color: $first-75;
first70 - color: $first-70;
first65 - color: $first-65;
first60 - color: $first-60;
first55 - color: $first-55;
first50 - color: $first-50;
first45 - color: $first-45;
first40 - color: $first-40;
first35 - color: $first-35;
first30 - color: $first-30;
first25 - color: $first-25;
first20 - color: $first-20;
first15 - color: $first-15;
first10 - color: $first-10;
first5 - color: $first-5;

//second color
second95 - color: $second-95;
second90 - color: $second-90;
second85 - color: $second-85;
second80 - color: $second-80;
second75 - color: $second-75;
second70 - color: $second-70;
second65 - color: $second-65;
second60 - color: $second-60;
second55 - color: $second-55;
second50 - color: $second-50;
second45 - color: $second-45;
second40 - color: $second-40;
second35 - color: $second-35;
second30 - color: $second-30;
second25 - color: $second-25;
second20 - color: $second-20;
second15 - color: $second-15;
second10 - color: $second-10;
second5 - color: $second-5;

//background color
//variables background color
bg-dark-gray - background-color: $dark-gray;
bg-medium-gray - background-color: $medium-gray;
bg-light-gray - background-color: $light-gray;

bg-font-color - background-color: $font-color;
bg-link-color - background-color: $link-color;
bg-hover-color - background-color: $hover-color;

bg-error-color - background-color: $error-color;
bg-alert-color - background-color: $alert-color;
bg-success-color - background-color: $success-color;

bg-black - background-color: $black;
bg-white - background-color: $white;
bg-first - background-color: $first-color;
bg-second - background-color: $second-color;

//background color - black
bg-black95 - background-color: $black-95;
bg-black90 - background-color: $black-90;
bg-black85 - background-color: $black-85;
bg-black80 - background-color: $black-80;
bg-black75 - background-color: $black-75;
bg-black70 - background-color: $black-70;
bg-black65 - background-color: $black-65;
bg-black60 - background-color: $black-60;
bg-black55 - background-color: $black-55;
bg-black50 - background-color: $black-50;
bg-black45 - background-color: $black-45;
bg-black40 - background-color: $black-40;
bg-black35 - background-color: $black-35;
bg-black30 - background-color: $black-30;
bg-black25 - background-color: $black-25;
bg-black20 - background-color: $black-20;
bg-black15 - background-color: $black-15;
bg-black10 - background-color: $black-10;
bg-black5 - background-color: $black-5;

//background color - first color
bg-first95 - background-color: $first-95;
bg-first90 - background-color: $first-90;
bg-first85 - background-color: $first-85;
bg-first80 - background-color: $first-80;
bg-first75 - background-color: $first-75;
bg-first70 - background-color: $first-70;
bg-first65 - background-color: $first-65;
bg-first60 - background-color: $first-60;
bg-first55 - background-color: $first-55;
bg-first50 - background-color: $first-50;
bg-first45 - background-color: $first-45;
bg-first40 - background-color: $first-40;
bg-first35 - background-color: $first-35;
bg-first30 - background-color: $first-30;
bg-first25 - background-color: $first-25;
bg-first20 - background-color: $first-20;
bg-first15 - background-color: $first-15;
bg-first10 - background-color: $first-10;
bg-first5 - background-color: $first-5;

//background color - second color
bg-second95 - background-color: $second-95;
bg-second90 - background-color: $second-90;
bg-second85 - background-color: $second-85;
bg-second80 - background-color: $second-80;
bg-second75 - background-color: $second-75;
bg-second70 - background-color: $second-70;
bg-second65 - background-color: $second-65;
bg-second60 - background-color: $second-60;
bg-second55 - background-color: $second-55;
bg-second50 - background-color: $second-50;
bg-second45 - background-color: $second-45;
bg-second40 - background-color: $second-40;
bg-second35 - background-color: $second-35;
bg-second30 - background-color: $second-30;
bg-second25 - background-color: $second-25;
bg-second20 - background-color: $second-20;
bg-second15 - background-color: $second-15;
bg-second10 - background-color: $second-10;
bg-second5 - background-color: $second-5;

//media breakpoints
//none for color as yet

//font family
font - font-family: $font;
heading-font - font-family: $heading-font;
code-font - font-family: $code-font;

//font-size
normal - $font-size//1.2rem
lead - $lead
secondary - $secondary
third - $third

//see css/base/_typography.scss
p - font-size: clamp($font-size, 1.1385rem + 0.3077vw, 1.35rem);

//headings
//set your css Clamp function settings at https://clamp.font-size.app
//see css/base/_typography.scss
//all clamp functions based on screen width 320px to 1100px
h1 - font-size: clamp(2rem, 0.58rem + 3.77vw, 3rem);
h2 - font-size: clamp(1.75rem, 0.69rem + 2.83vw, 2.5rem);
h3 - font-size: clamp(1.5rem, 0.79rem + 1.89vw, 2rem);
h4 - font-size: clamp(1.25rem, 0.54rem + 1.89vw, 1.75rem);
h5 - font-size: clamp(1.13rem, 0.59rem + 1.42vw, 1.5rem);
h6 - font-size: clamp(1rem, 0.65rem + 0.94vw, 1.25rem);

//big heading sizes - classes only!
//see css/class/_typography.scss
bighead-1 - font-size: clamp(2.5rem, 2.2949rem + 1.0256vw, 3rem);
bighead-2 - font-size: clamp(3rem, 2.7949rem + 1.0256vw, 3.5rem);
bighead-3 - font-size: clamp(3.5rem, 3.2949rem + 1.0256vw, 4rem);
bighead-4 - font-size: clamp(4rem, 3.7949rem + 1.0256vw, 4.5rem);

//hyphens
hyphens - hyphens: auto;
hyphens-man - hyphens: manual;
hyphens-none - hyphens: none;

//align
center - text-align: center
left - text-align: left
right - text-align: right

//letter spacing
ls-tight - letter-spacing: -0.025em;
ls-0 - letter-spacing: normal;
ls - letter-spacing: 0.0625rem;
ls-2 - letter-spacing: 0.125rem;
ls-3 - letter-spacing: 0.1875rem;
ls-4 - letter-spacing: 0.25rem;
ls-5 - letter-spacing: 0.3125rem;
ls-6 - letter-spacing: 0.375rem;
ls-7 - letter-spacing: 0.4375rem;
ls-8 - letter-spacing: 0.5rem;
ls-9 - letter-spacing: 0.5625rem;
ls-10 - letter-spacing: 0.625rem;

//line-height
lh - line-height: 1;
lh-1 - line-height: 1.1;
lh-2 - line-height: 1.2;
lh-3 - line-height: 1.3;
lh-4 - line-height: 1.4;
lh-5 - line-height: 1.5;
lh-6 - line-height: 1.6;
lh-7 - line-height: 1.7;
lh-8 - line-height: 1.8;
lh-9 - line-height: 1.9;
lh-20 - line-height: 2;
lh-21 - line-height: 2.1;

//font weight
font100 - font-weight: 100;
font200 - font-weight: 200;
font300 - font-weight: 300;
font400 - font-weight: 400;
font500 - font-weight: 500;
font600 - font-weight: 600;
font700 - font-weight: 700;
font800 - font-weight: 800;
font900 - font-weight: 900;

//font-style
italic - font-style: italic;
not-italic - font-style: normal;

//text-transform
upper - text-transform: uppercase;
lower - text-transform: lowercase;
caps - text-transform: capitalize;
normal-case - text-transform: none;

//media breakpoints
//not included font-family or headings. Headings using clamp function at the moment
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class

//examples
lead_7 - font-size: $lead;//@700px
center_9 - text-align: center;//@900px
ls-tight_11 - letter-spacing: -0.025em;//@1100px
lh-2_7 - line-height: 1.2;//@700px
font300_9 - font-weight: 300;//@900px
caps_11 text-transform: capitalize;//@1100px

//centered
centered - margin-left: auto; - margin-right: auto;

//margin top and bottom
my-0 - margin-top: 0; - margin-bottom: 0;
my - margin-top: $spacer; - margin-bottom: $spacer;//2rem
my-m - margin-top: $medium-spacer; - margin-bottom: $medium-spacer;//1rem
my-s - margin-top: $small-spacer; - margin-bottom: $small-spacer;//0.5rem
my-l - margin-top: $large-spacer; - margin-bottom: $large-spacer;//3rem
my-b - margin-top: $big-spacer; - margin-bottom: $big-spacer;//4rem

//margin left and right
mx-0 - margin-left: 0; - margin-right: 0;
mx - margin-left: $spacer; - margin-right: $spacer;//2rem
mx-m - margin-left: $medium-spacer; - margin-right: $medium-spacer;//1rem
mx-s - margin-left: $small-spacer; - margin-right: $small-spacer;//0.5rem
mx-l - margin-left: $large-spacer; - margin-right: $large-spacer;//3rem
mx-b - margin-left: $big-spacer; - margin-right: $big-spacer;//4rem

//margin top
mt-0 - margin-top: 0;
mt - margin-top: $spacer;//2rem
mt-m - margin-top: $medium-spacer;//1rem
mt-s - margin-top: $small-spacer;//0.5rem
mt-l - margin-top: $large-spacer;//3rem
mt-b - margin-top: $big-spacer;//4rem

//margin bottom
mb-0 - margin-bottom: 0;
mb - margin-bottom: $spacer;//2rem
mb-m - margin-bottom: $medium-spacer;//1rem
mb-s - margin-bottom: $small-spacer;//0.5rem
mb-l - margin-bottom: $large-spacer;//3rem
mb-b - margin-bottom: $big-spacer;//4rem

//margin left
ml-0 - margin-left: 0;
ml - margin-left: $spacer;//2rem
ml-m - margin-left: $medium-spacer;//1rem
ml-s - margin-left: $small-spacer;//0.5rem
ml-l - margin-left: $large-spacer;//3rem
ml-b - margin-left: $big-spacer;//4rem

//margin right
mr-0 - margin-right: 0;
mr - margin-right: $spacer;//2rem
mr-m - margin-right: $medium-spacer;//1rem
mr-s - margin-right: $small-spacer;//0.5rem
mr-l - margin-right: $large-spacer;//3rem
mr-b - margin-right: $big-spacer;//4rem

//media breakpoints
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class

//examples
my_7 - margin-top: $spacer; - margin-bottom: $spacer;//@700px
mx_9 - margin-left: $spacer; - margin-right: $spacer;//@900px
mt_11 - margin-top: $spacer;//@1100px

//padding top and bottom
py-0 - padding-top: 0; - padding-bottom: 0;
py - padding-top: $spacer; - padding-bottom: $spacer;//2rem
py-m - padding-top: $medium-spacer; - padding-bottom: $medium-spacer;//1rem
py-s - padding-top: $small-spacer; - padding-bottom: $small-spacer;//0.5rem
py-l - padding-top: $large-spacer; - padding-bottom: $large-spacer;//3rem
py-b - padding-top: $big-spacer; - padding-bottom: $big-spacer;//4rem

//padding left and right
px-0 - padding-left: 0; - padding-right: 0;
px - padding-left: $spacer; - padding-right: $spacer;//2rem
px-m - padding-left: $medium-spacer; - padding-right: $medium-spacer;//1rem
px-s - padding-left: $small-spacer; - padding-right: $small-spacer;//0.5rem
px-l - padding-left: $large-spacer; - padding-right: $large-spacer;//3rem
px-b - padding-left: $big-spacer; - padding-right: $big-spacer;//4rem

//padding top
pt-0 - padding-top: 0;
pt - padding-top: $spacer;//2rem
pt-m - padding-top: $medium-spacer;//1rem
pt-s - padding-top: $small-spacer;//0.5rem
pt-l - padding-top: $large-spacer;//3rem
pt-b - padding-top: $big-spacer;//4rem

//padding bottom
pb-0 - padding-bottom: 0;
pb - padding-bottom: $spacer;//2rem
pb-m - padding-bottom: $medium-spacer;//1rem
pb-s - padding-bottom: $small-spacer;//0.5rem
pb-l - padding-bottom: $large-spacer;//3rem
pb-b - padding-bottom: $big-spacer;//4rem

//padding left
pl-0 - padding-left: 0;
pl - padding-left: $spacer;//2rem
pl-m - padding-left: $medium-spacer;//1rem
pl-s - padding-left: $small-spacer;//0.5rem
pl-l - padding-left: $large-spacer;//3rem
pl-b - padding-left: $big-spacer;//4rem

//padding right
pr-0 - padding-right: 0;
pr - padding-right: $spacer;//2rem
pr-m - padding-right: $medium-spacer;//1rem
pr-s - padding-right: $small-spacer;//0.5rem
pr-l - padding-right: $large-spacer;//3rem
pr-b - padding-right: $big-spacer;//4rem

//media breakpoints
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class

//examples
py_7 - padding-top: $spacer; - padding-bottom: $spacer;//@700px
px_9 - padding-left: $spacer; - padding-right: $spacer;//@900px
pt_11 - padding-top: $spacer;//@1100px

//width
width100 - width: 100%;
width90 - width: 90%;
width80 - width: 80%;
width75 - width: 75%;
width50 - width: 50%;
width25 - width: 25%;

//width variables
width - width: $spacer;//2rem
width-s - width: $small-spacer;//0.5rem
width-m - width: $medium-spacer;//1rem
width-l - width: $large-spacer;//3rem
width-b - width: $big-spacer;//4rem

//height
height100 - height: 100%;
height - height: $spacer;//2rem
height-s - height: $small-spacer;//0.5rem
height-m - height: $medium-spacer;//1rem
height-l - height: $large-spacer;//3rem
height-b - height: $big-spacer;//4rem

//radius
rad - border-radius: $radius; //6px - 0.375rem
rad-m - border-radius: 0.625rem;
rad-s - border-radius: 0.1875rem;
rad-l - border-radius: 0.9375rem;
rad-b - border-radius: 1.25rem;
rad-full - border-radius: 3.125rem;

//media breakpoints
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class

//examples
width90_7 - width: 90%;//@700px
width-s_9 - width: $small-spacer;//@900px
height-m_11 - height: $medium-spacer;//@1100px
lh-2_7 - line-height: 1.2;//@700px
rad-m_9 - border-radius: 0.625rem;//@900px
height-b_11 - height: $big-spacer;//@1100px

//display
block - display: block;
inline - display: inline;
inline-block - display: inline-block;
hidden - display: none;
flex - display: flex;
hide - @include hidden;
show - @include show;

//media breakpoints
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class

//examples
inline_7 - display: inline;//@700px
hidden_9 - display: none;//@900px
flex_11 - display: flex;//@1100px

//cursor
cursor - cursor: default;
cursor-p - cursor: pointer;
cursor-h - cursor: help;
cursor-w - cursor: wait;
cursor-ch - cursor: crosshair;
cursor-na - cursor: not-allowed;
cursor-zi - cursor: zoom-in;
cursor-zo - cursor: zoom-out;
cursor-g - cursor: grab;

//list-style
list-none - list-style: none;
list-disc - list-style: disc;
list-decimal - list-style: decimal;
list-circle - list-style: circle;
list-square - list-style: square;
list-inside - list-style-position: inside;
list-outside - list-style-position: outside;

//border
border - border: $border;
no-border - border: none;

//border width
border-2 - border-width: 0.125rem;
border-3 - border-width: 0.188rem;
border-4 - border-width: 0.25rem;
border-5 - border-width: 0.313rem;
border-6 - border-width: 0.375rem;
border-7 - border-width: 0.438rem;
border-8 - border-width: 0.5rem;
border-9 - border-width: 0.563rem;
border-10 - border-width: 0.625rem;

//border style
border-solid - border-style: solid;
border-dashed - border-style: dashed;
border-groove - border-style: groove;
border-double - border-style: double;
border-dotted - border-style: dotted;
border-ridge - border-style: ridge;
border-inset - border-style: inset;
border-outset - border-style: outset;
border-none - border-style: none;
border-hidden - border-style: hidden;

//border color
border-light - border-color: $light-gray;
border-medium - border-color: $medium-gray;
border-dark - border-color: $dark-gray;
border-first - border-color: $first-color;
border-second - border-color: $second-color;
border-black - border-color: $black;
border-white - border-color: $white;
border-trans - border-color: transparent;

//media breakpoints
//no media breaks for cursor and list styles
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class

//examples
border_7 - border: $border;//@700px
border-3_9 - border-width: 0.188rem;//@900px
border-groove_11 - border-style: groove;//@1100px

//flex direction
//row is default
flex-row - flex-direction: row;
row-reverse - flex-direction: row-reverse;
flex-col - flex-direction: column;
col-reverse - flex-direction: column-reverse;

//flex-wrap
no-wrap - flex-wrap: nowrap;
wrap - flex-wrap: wrap;
wrap-reverse - flex-wrap: wrap-reverse;

//justify content
content-start - justify-content: flex-start;
content-end - justify-content: flex-end;
content-center - justify-content: center;
content-between - justify-content: space-between;
content-around - justify-content: space-around;
content-evenly - justify-content: space-evenly;

//align-items
items-start - align-items: flex-start;
items-end - align-items: flex-end;
items-center - align-items: center;
items-baseline - align-items: baseline;
items-stretch - align-items: stretch;

//flex container items
grow - flex-grow: 1;

//media breakpoints
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class

//examples
flex-row_7 - flex-direction: row;//@700px
content-start_9 - justify-content: flex-start;//@900px
items-center_11 - align-items: center;//@1100px

//gap
gap-0 - gap: 0;
gap - gap: $spacer; //2rem
gap-m - gap: $medium-spacer; //1rem
gap-s - gap: $small-spacer; //0.5rem
gap-l - gap: $large-spacer; //3rem
gap-b - gap: $big-spacer; //4rem

//gap row
row-gap-0 - row-gap: 0;
row-gap - row-gap: $spacer; //2rem
row-gap-m - row-gap: $medium-spacer; //1rem
row-gap-s - row-gap: $small-spacer; //0.5rem
row-gap-l - row-gap: $large-spacer; //3rem
row-gap-b - row-gap: $big-spacer; //4rem

//gap column
col-gap-0 - column-gap: 0;
col-gap - column-gap: $spacer; //2rem
col-gap-m - column-gap: $medium-spacer; //1rem
col-gap-s - column-gap: $small-spacer; //0.5rem
col-gap-l - column-gap: $large-spacer; //3rem
col-gap-b - column-gap: $big-spacer; //4rem

//media breakpoints
//@media min-width 700px, 900px, 1100px
//use _7, _9, _11 at the end of the class

//examples
gap-m_7 - gap: $medium-spacer;//@700px
row-gap-m_9 - row-gap: $medium-spacer;//@900px
col-gap-l_11 - column-gap: $large-spacer;//@1100px