@import "../../v2/themes/assets_builder/base-colors";

@formThemeColor: @dark_font_color;
@svg-group-booking: fade(@formThemeColor, 99.9%);

@svgContrastColor: contrast(@sb_base_color, @dark_font_color, @light_font_color);
@svg-contrast-color: fade(@svgContrastColor, 99.9%);

//@btn_color_1 : @sb_base_color;
//@booking_nav_bg_color : @sb_base_color;

body {
  background: @body_bg_color;
  color: @dark_font_color;
}

html {
  &::-webkit-scrollbar {
    _background-color: @body_bg_color;
  }
}


// Theme main icons color
.preloader,
.photo,
.item__picture,
.empty-step__image,
  //.invoice-pay-page,
.invoice-notifications,
.error-card ,
.page-content--online-meeting .online-meeting__picture {
  svg * {
    stroke: @sb_base_color;
  }
}

.plugin-group-booking:before {
  background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="iso-8859-1"?><svg xmlns="http://www.w3.org/2000/svg" width="24.61" height="25" viewBox="0 0 19.688 20"><path data-name="user copy" d="M9.844 10a5 5 0 1 0-4.922-5 4.975 4.975 0 0 0 4.922 5zm0 2.5C6.521 12.5 0 14.12 0 17.5V20h19.687v-2.5c0-3.38-6.521-5-9.843-5z" fill="@{svg-group-booking}" fill-rule="evenodd"/></svg>');
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: left center;
}

.header{
  &__menu-trigger{
    background: @sb_base_color;
    color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
  }

  &__btn-close{
    &:hover, &:focus{
      color: #F44336;
    }
    &:active{
      color: darken(#F44336, 10%);
    }
  }

  &__navigation-item{
    &.active{
      .header__navigation-link{
        border-color: @sb_base_color;
      }
    }
  }

  &__navigation-link{
    color: @dark_font_color;

    &:hover, &:focus{
      color: @dark_font_color;
      border-color: lighten(@sb_base_color, 10%);
    }
  }

  .item-container{
    color: @sb_base_color;

    &:focus, &:hover{
      border-color: @sb_base_color;
    }
  }

  &--left,
  &--right{
    .header__menu-wrapper{
      .header__navigation{
        .header__navigation-item{
          &.active{
            .header__navigation-link{
              color: @sb_base_color;
            }
          }
        }
      }
    }
  }
}

// booking stap progress
.steps-nav #menu-active-bg {
  background: @booking_nav_bg_color;
}

#sb-timeline .steps-nav{
  background: rgba(@booking_nav_bg_color, 0.25);
}

.steps-nav li:not(.passed) {
  .title-small {
    color: contrast(@body_bg_color, @dark_font_color, @light_font_color);
  }
}

.steps-nav li:first-child,
.steps-nav li.passed,
.steps-nav li.passed + li:not(.passed) {
  background: @booking_nav_bg_color;
  .title-small {
    color: contrast(@booking_nav_bg_color, @dark_font_color, @light_font_color);
  }
}

#sb-timeline .steps-nav li:first-child:after {
  background: rgba(@booking_nav_bg_color, 0);
  border-top-color: rgba(@booking_nav_bg_color, 0);
  border-left-color: @booking_nav_bg_color;
  border-bottom-color: rgba(@booking_nav_bg_color, 0);
}

#sb-timeline .steps-nav li.passed + li:not(.passed):after {
  background: rgba(@booking_nav_bg_color, 0);
  border-top-color: rgba(@booking_nav_bg_color, 0);
  border-left-color: @booking_nav_bg_color;
  border-bottom-color: rgba(@booking_nav_bg_color, 0);
}


.company-name {
  color: @sb_company_label_color;
}

//RTL
html[dir="rtl"] #sb-timeline .steps-nav li:first-child:after {
  border-left-color: inherit;
  border-right-color: @booking_nav_bg_color;
}
html[dir="rtl"] #sb-timeline .steps-nav li.passed + li:not(.passed):after {
  border-left-color: inherit;
  border-right-color: @booking_nav_bg_color;
}

// Samesite cookies popup
.samesite-cookies {
  background: rgba(@body_bg_color, .7);
  &__popup {
    background: @body_bg_color;

    &-btn {
      background: @sb_base_color;
      color: contrast(@sb_base_color, @dark_font_color, @light_font_color);

      &:hover {
        color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
      }
    }

    &-link {
      color: @sb_base_color;
    }
  }
}

// Date field icon
.calendar-toggle {
  &__icon path {
    fill: @sb_base_color;

    &:last-child {
      fill: none;
      stroke: @sb_base_color;
    }
  }
}

// Remember me
.login-container__remember-check {
  box-shadow: 0 0 8px 0 @sb_base_color;
  svg path {
    stroke: @sb_base_color;
  }
}

.item__footer .btn-bar {
  .btn.select-by-bonus{
    background-color: #fff;
    border: 1px solid @sb_base_color;
    color: @sb_base_color;
    &.disabled{
      background: transparent;
      border: 1px solid @dark_font_color;
      color: @dark_font_color;
    }
  }
}