@st-namespace 'MobileDrawer-st-css';
@st-import [ --wst-primary-background-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
@st-import [ createColor ] from '../../common/formatters.st';

/*
 * The mobile drawer's border radius. In case of top position apply to the bottom corners, in case of bottom position apply to the top corners
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-mobile-drawer-border-radius);

/*
 * The mobile drawer's border width
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-mobile-drawer-border-width);

/*
 * The mobile drawer's border color
 * @type color
 * @default "0, 0, 0"
 */
@property st-global(--wix-ui-tpa-mobile-drawer-border-color);

/*
 * The mobile drawer's background color
 * @type color
 * @default var(--wst-primary-background-color-rgb, "255, 255, 255")
 */
@property st-global(--wix-ui-tpa-mobile-drawer-background-color);

.root {
  width: 100%;
  --white: 255, 255, 255;
  --black: 0, 0, 0;
  --background-color: var(--wst-primary-background-color-rgb, var(--white));
}

.contentWrapper {
  -st-states: visible, position(enum(top, bottom)), fullScreen;
  background-color: createColor(--wix-ui-tpa-mobile-drawer-background-color, var(--background-color));
  position: absolute;

  min-height: 60px;
  max-height: 320px;
  width: 100%;

  border-width: var(--wix-ui-tpa-mobile-drawer-border-width, 0px);
  border-color: createColor(--wix-ui-tpa-mobile-drawer-border-color, var(--black));
  border-style: solid;

  transition: 0.3s ease;
  transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

.contentWrapper:fullScreen {
  min-height: 100vh;
  transition-duration: 0.5s;
}

.contentWrapper:position(top) {
  top: -100%;
  border-bottom-left-radius: var(--wix-ui-tpa-mobile-drawer-border-radius, 0px);
  border-bottom-right-radius: var(--wix-ui-tpa-mobile-drawer-border-radius, 0px);
}

.contentWrapper:position(top):visible {
  top: 0;
}

.contentWrapper:position(bottom) {
  bottom: -100%;
  border-top-left-radius: var(--wix-ui-tpa-mobile-drawer-border-radius, 0px);
  border-top-right-radius: var(--wix-ui-tpa-mobile-drawer-border-radius, 0px);
}

.contentWrapper:position(bottom):visible {
  bottom: 0;
}

/* st-namespace-reference="../../../../src/components/MobileDrawer/MobileDrawer.st.css" */