// Various variables
@use 'sass:math';

// Various corner sizing
$sd-base-border-radius: 3px; // forms & tags
$sd-corner-radius: 23px; // cards, modals, & tooltips
$sd-corner-radius-small: 12px; // notifications & tooltips
$sd-corner-radius-medium: 16px;
$sd-corner-radius-large: $sd-corner-radius;

// specific corner use cases
$sd-button-border-radius: 100px;
$sd-notifications-corner-radius: $sd-corner-radius-small;
$sd-tooltip-corner-radius: $sd-corner-radius-small;

// Other sizing
$sd-base-z-index: 0;
$sd-select-box-height: 41px;
$sd-tap-target: 44px;

// For identifying breakpoints
// See sd-viewport mixin
$sd-mobile: mobile; // only mobile sizes
$sd-tablet: tablet; // only tablet sizes
$sd-tablet-plus: tablet-plus; // all sizes beyond tablet min
$sd-desktop: desktop; // desktop sizes only
$sd-mobile-tablet: mobile-tablet; // all sizes up to tablet max

// Actual breakpoints
$sd-mobile-max: 500px;
$sd-tablet-max: 1133px;

// Spacing and gutters
$sd-em-base: 16px !default; // from Bourbon, deprecate?
$sd-base-spacing: 32px;
$sd-small-spacing: $sd-base-spacing * 0.5;
$sd-mobile-gutter: 24px;
$sd-mobile-card-gutter: 8px;
$sd-mobile-card-padding: $sd-mobile-gutter - $sd-mobile-card-gutter;
$sd-utility-bar-padding: 18px;

// Returns the percentage an element needs to reset its parent's percentage
// based padding
// Takes in a percentage
@function sd-reset-padding($percent) {
    @return (math.div((2 * $percent), (100 - (2 * $percent))) * 0.5) * 100%;
}

$sd-mobile-gutter-reset: sd-reset-padding($sd-mobile-gutter);
$sd-mobile-card-padding-reset: sd-reset-padding($sd-mobile-card-padding);

// Timing
$sd-transition-timing: 0.5s;
$sd-transition-function: cubic-bezier(0.305, 0.94, 0.48, 0.995);