@import "variables";

:root {
  --brand-primary: #{$brand-primary};
  --brand-white: #{$brand-white};
  --brand-black: #{$brand-black};
  --brand-black2: #{$brand-black2};
  --brand-grey: #{$brand-grey};
  --brand-grey2: #{$brand-grey2};
  --brand-grey3: #{$brand-grey3};
  --brand-orange: #{$brand-orange};

  --box-shadow-primary: #{$box-shadow-primary};

  --base-border-radius: #{$base-border-radius};
  --base-border: #{$base-border};
  --base-input-height: #{$base-input-height};


  text-align: center;
  color: var(--brand-black2);
}

html,
body {
  max-width: 100vw;
  max-height: initial;
  height: initial;
  // not work with posytion sticky
  //overflow-x: hidden;
}

label {
  display: inline-block;

  &[required] {

    &:before {
      content: "*";
      color: var(--brand-primary);
    }
  }
}

input, textarea {
  outline: none;
  border: var(--base-border);
  border-radius: var(--base-border-radius);
  height: var(--base-input-height);
  width: 100%;
  font-size: 16px;
  line-height: 22px;
  cursor: pointer;
  padding: 10px 40px 10px 7px;
  box-sizing: border-box;
  max-width: 100%;

  &.date {
    background: white url(/static/img/svg/Calendar.svg) right 2% bottom 45% no-repeat;
  }

  &.locate {
    background: white url(/static/img/svg/MapPinLine.svg) right 2% bottom 45% no-repeat;
  }

  &.loading {
    background: white url(/static/img/svg/loader.svg) no-repeat calc(100% - 15px) center;
  }

  &.is-items {
    background: url(/static/img/png/icon-arrow.svg) calc(100% - 15px) center no-repeat white;
  }
}