//
//  DIALTONE
//  UTILITIES: SIZING
//
//  These are sizing utility classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/utilities/sizing
//
//  TABLE OF CONTENTS
//  • HEIGHT
//      - PERCENTAGES
//      - MAX-HEIGHT
//      - MIN-HEIGHT
//      - FIXED
//  • WIDTH
//      - FLUID
//      - MAX-WIDTH
//      - MIN-WIDTH
//      - FIXED
//
//  ============================================================================
//  $   HEIGHT
//  ============================================================================
//  $$  PERCENTAGES
//  ----------------------------------------------------------------------------
.d-h10p { height: 10% !important; }
.d-h20p { height: 20% !important; }
.d-h25p { height: 25% !important; }
.d-h30p { height: 30% !important; }
.d-h40p { height: 40% !important; }
.d-h50p { height: 50% !important; }
.d-h60p { height: 60% !important; }
.d-h70p { height: 70% !important; }
.d-h75p { height: 75% !important; }
.d-h80p { height: 80% !important; }
.d-h90p { height: 90% !important; }
.d-h100p { height: 100% !important; }

//  $$  MAX-HEIGHT
//  ----------------------------------------------------------------------------
.d-hmx10p { max-height: 10% !important; }
.d-hmx20p { max-height: 20% !important; }
.d-hmx25p { max-height: 25% !important; }
.d-hmx30p { max-height: 30% !important; }
.d-hmx40p { max-height: 40% !important; }
.d-hmx50p { max-height: 50% !important; }
.d-hmx60p { max-height: 60% !important; }
.d-hmx70p { max-height: 70% !important; }
.d-hmx75p { max-height: 75% !important; }
.d-hmx80p { max-height: 80% !important; }
.d-hmx90p { max-height: 90% !important; }
.d-hmx100p { max-height: 100% !important; }

//  $$  MIN-HEIGHT
//  ----------------------------------------------------------------------------
.d-hmn10p { min-height: 10% !important; }
.d-hmn20p { min-height: 20% !important; }
.d-hmn25p { min-height: 25% !important; }
.d-hmn30p { min-height: 30% !important; }
.d-hmn40p { min-height: 40% !important; }
.d-hmn50p { min-height: 50% !important; }
.d-hmn60p { min-height: 60% !important; }
.d-hmn70p { min-height: 70% !important; }
.d-hmn75p { min-height: 75% !important; }
.d-hmn80p { min-height: 80% !important; }
.d-hmn90p { min-height: 90% !important; }
.d-hmn100p { min-height: 100% !important; }

//  $$  FIXED
//  ----------------------------------------------------------------------------
.d-h100vh { height: 100vh !important; }
.d-h-auto { height: auto !important; }
.d-h-unset { height: unset !important; }

.d-hmn-auto { min-height: auto !important; }
.d-hmn-unset { min-height: unset !important; }

.d-hmx-auto { max-height: auto !important; }
.d-hmx-unset { max-height: unset !important; }


//  ============================================================================
//  $   WIDTH
//  ============================================================================
//  $$  FLUID
//  ----------------------------------------------------------------------------
.d-w10p { width: 10% !important; }
.d-w20p { width: 20% !important; }
.d-w25p { width: 25% !important; }
.d-w30p { width: 30% !important; }
.d-w40p { width: 40% !important; }
.d-w50p { width: 50% !important; }
.d-w60p { width: 60% !important; }
.d-w70p { width: 70% !important; }
.d-w75p { width: 75% !important; }
.d-w80p { width: 80% !important; }
.d-w90p { width: 90% !important; }
.d-w100p { width: 100% !important; }

//  $$  MAX-WIDTH
//  ----------------------------------------------------------------------------
.d-wmx10p { max-width: 10% !important; }
.d-wmx20p { max-width: 20% !important; }
.d-wmx25p { max-width: 25% !important; }
.d-wmx30p { max-width: 30% !important; }
.d-wmx40p { max-width: 40% !important; }
.d-wmx50p { max-width: 50% !important; }
.d-wmx60p { max-width: 60% !important; }
.d-wmx70p { max-width: 70% !important; }
.d-wmx75p { max-width: 75% !important; }
.d-wmx80p { max-width: 80% !important; }
.d-wmx90p { max-width: 90% !important; }
.d-wmx100p { max-width: 100% !important; }

//  $$  MIN-WIDTH
//  ----------------------------------------------------------------------------
.d-wmn10p { min-width: 10% !important; }
.d-wmn20p { min-width: 20% !important; }
.d-wmn25p { min-width: 25% !important; }
.d-wmn30p { min-width: 30% !important; }
.d-wmn40p { min-width: 40% !important; }
.d-wmn50p { min-width: 50% !important; }
.d-wmn60p { min-width: 60% !important; }
.d-wmn70p { min-width: 70% !important; }
.d-wmn75p { min-width: 75% !important; }
.d-wmn80p { min-width: 80% !important; }
.d-wmn90p { min-width: 90% !important; }
.d-wmn100p { min-width: 100% !important; }

//  $$  FIXED
//  ----------------------------------------------------------------------------
.d-w60ch { width: 60ch !important; }
.d-w75ch { width: 75ch !important; }
.d-w90ch { width: 90ch !important; }

.d-w100vw { width: 100vw !important; }
.d-w-auto { width: auto !important; }
.d-w-unset { width: unset !important; }
.d-w-fit-content { width: fit-content !important; }
.d-w-max-content { width: max-content !important; }
.d-w-min-content { width: min-content !important; }

.d-wmn60ch { min-width: 60ch !important; }
.d-wmn75ch { min-width: 75ch !important; }
.d-wmn90ch { min-width: 90ch !important; }
.d-wmn-fit-content { min-width: fit-content !important; }
.d-wmn-max-content { min-width: max-content !important; }
.d-wmn-min-content { min-width: min-content !important; }

.d-wmn-auto { min-width: auto !important; }
.d-wmn-unset { min-width: unset !important; }

.d-wmx60ch { max-width: 60ch !important; }
.d-wmx75ch { max-width: 75ch !important; }
.d-wmx90ch { max-width: 90ch !important; }

.d-wmx-auto { max-width: auto !important; }
.d-wmx-unset { max-width: unset !important; }
.d-wmx-fit-content { max-width: fit-content !important; }
.d-wmx-max-content { max-width: max-content !important; }
.d-wmx-min-content { max-width: min-content !important; }