@import "_variables";

/* WP Admin Bar Override */
body.admin-bar {
  .el-popper[x-placement^=bottom] {
    margin-top: 44px;
  }

  .el-popper[x-placement^=top] {
    /*margin-top: -36px;*/
  }
}

.amelia-app-booking {
  position: relative;
}

//fix for phonecode on front-end
.el-select-dropdown {

  .am-phone-input-nicename {
    float: left;
  }

  .am-phone-input-phonecode {
    float: right;
    color: @color-text-second;
    font-size: 13px
  }
}

.amelia-app-booking, .am-modal.am-in-body {

  //helpers
  .am-align-right {
    text-align: right;
  }

  .am-align-left {
    text-align: left;
  }

  .am-align-center {
    text-align: center;
  }

  .am-strong {
    font-weight: @bold;
  }

  .am-semi-strong {
    font-weight: @medium;
  }

  .am-align-justify {
    text-align: justify;
  }

  ::-moz-placeholder {
    color: #ccc;
  }

  :-ms-input-placeholder {
    color: #ccc !important;
  }

  //v-calendar
  .am-calendar-picker {
    color: @color-text-prime;

    .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title {
      font-weight: 400;
      font-size: @regular-fs;
    }

    .c-header .c-arrow-layout .c-arrow {
      font-size: @medium-fs;
    }

    .c-weekdays {
      font-size: @small-fs;
    }

    .c-day-content {
      width: 28px;
      height: 28px;
      font-size: @small-fs;
      font-weight: @regular;
      line-height: 1.5;
    }

    .c-day-background {
      width: 28px !important;
      height: 28px !important;
      background-color: @color-accent !important;
    }
  }

  .el-input .el-icon-circle-close {
    color: @color-text-prime;
  }

  .el-select {
    &.am-sort {
      position: relative;

      &:before {
        width: 18px;
        height: 18px;
        position: absolute;
        z-index: 1;
        top: 14px;
        left: 12px;
        //content: url('../../img/sort.svg');
        content: ' ';
        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDEyIj4NCiAgICA8cGF0aCBmaWxsPSIjNjE2RTdDIiBmaWxsLXJ1bGU9Im5vbnplcm8iDQogICAgICAgICAgZD0iTTMgMTFhMSAxIDAgMCAwLTEtMUgxYTEgMSAwIDAgMCAwIDJoMWExIDEgMCAwIDAgMS0xek0xIDJoMTJhMSAxIDAgMCAwIDAtMkgxYTEgMSAwIDAgMCAwIDJ6bTggNGExIDEgMCAwIDAtMS0xSDFhMSAxIDAgMCAwIDAgMmg3YTEgMSAwIDAgMCAxLTF6Ii8+DQo8L3N2Zz4NCg==") no-repeat top;
        line-height: 1;
        text-align: left;
        vertical-align: top;
        color: @color-text-second;
        display: inline-block;
      }

      input {
        padding-left: @padding-medium * 2;
      }
    }
  }

  .el-button--primary.el-button {
    background-color: @color-accent;
    border-color: @color-accent;
    color: @color-white;

    &:hover, &:focus {
      color: @color-white;
      background-color: fade(@color-accent, 75%);
      border-color: fade(@color-accent, 75%);

      span {
        color: @color-white;
      }
    }

    span {
      color: @color-white;
    }
  }

  .el-button {
    &:hover, &:focus {
      color: @color-accent;
      border-color: fade(@color-accent, 10%);
      background-color: fade(@color-accent, 10%);

      span {
        color: @color-accent;
      }
    }

    span {
      color: @color-text-prime;
    }

    @media @less-then-xsmall {
      font-size: 12px;
    }
  }

  .am-flex-row-middle-align {
    display: flex;
    align-items: center;
    @media @less-then-small {
      display: block;
    }
  }

  .am-flex-row-middle-align-mobile {
    display: flex;
    align-items: center;
  }

  .am-spinner-wrapper {
    text-align: center;
    height: 244px;
    display: flex;
    align-items: center;
    position: relative;

    .am-spinner-service {
      margin: 0 auto;

      .am-spin {
        width: 80px;
        padding: 0;
        margin: 0;

        path {
          stroke: @color-accent;
        }
      }

      .am-hourglass {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 24px;
        padding: 0;
        margin-left: -9px;
        margin-top: -16px;

        path {
          fill: @color-accent;
        }
      }
    }
  }

  .am-spinner {
    margin: 0 auto;
    position: relative;

    .am-spin {
      width: 80px;
      padding: 0;
      margin: 0;

      path {
        stroke: @color-accent;
      }
    }

    .am-hourglass {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 18px;
      height: 24px;
      padding: 0;
      margin-left: -9px;
      margin-top: -16px;

      path {
        fill: @color-accent;
      }
    }
  }

  .am-scroll {
    padding-right: 8px;
    padding-left: 8px;

    &::-webkit-scrollbar {
      position: absolute;
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background: @color-search-filters-bg;
    }

    &::-webkit-scrollbar-thumb {
      background: @color-divider-gray;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: darken(@color-divider-gray, 5%);
    }
  }

  .am-search-filters {
    .am-search-filter {

    }
  }

  .el-switch.is-checked .el-switch__core {
    background-color: @color-accent;
    border-color: @color-accent;
  }

  .am-add-element {
    color: @color-accent;
    display: inline-block;
    vertical-align: middle;
    padding: 0 @padding-small/2 0 @padding-small/2;
    cursor: pointer;
    background: @color-white;

    i {
      margin-right: @margin-small/2;
      border-radius: 50%;
      border: 1px solid @color-divider-gray;
      padding: @padding-small/2;
      font-size: @mini-fs - 2;
      vertical-align: middle;
    }

    span {
      vertical-align: middle;
      color: @color-accent;
    }

    &:hover {
      color: darken(@color-accent, 10%);

      i {
        background-color: @color-accent;
        color: @color-white;
      }
    }
  }

  .am-delete-element {
    color: @color-red;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;

    i {
      border-radius: 50%;
      border: 1px solid @color-divider-gray;
      padding: @padding-small/2;
      font-size: @mini-fs - 2;
      vertical-align: middle;
    }

    span {
      vertical-align: middle;
      color: @color-red;
    }

    &:hover {
      color: darken(@color-red, 10%);

      i {
        background-color: @color-red;
        color: @color-white;
      }
    }
  }

  .is-error {
    input {
      border-color: @color-red;
    }

    .el-form-item__error {
      color: @color-red;
      font-size: 10px;
      padding-top: 2px;
    }
  }

  .v-calendar-column {
    overflow: visible;
    .el-form-item__content, .am-calendar-picker {
      &:after {
        content: "";
        display: block;
        position: absolute;
        top: 2px;
        bottom: 2px;
        right: 8px;
        width: 16px;
        background: #fff url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDIyIDI0Ij4NCiAgICA8cGF0aCBmaWxsPSIjRTJFNkVDIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiDQogICAgICAgICAgZD0iTTE1LjcxNCAyLjY2N0g2LjI4NlYwSDIuNzV2Mi42NjdILjc4QS43ODMuNzgzIDAgMCAwIDAgMy40NXYxOS43NjRBLjc4Ljc4IDAgMCAwIC43ODMgMjRoMjAuNDM0YS43ODUuNzg1IDAgMCAwIC43ODMtLjc4NVYzLjQ1MWEuNzgyLjc4MiAwIDAgMC0uNzgtLjc4NGgtMS45N1YwaC0zLjUzNnYyLjY2N3pNMi43NSAyMS40MjlWOGgxNi41djEzLjQyOUgyLjc1ek0xMiAxNHY2aDZ2LTZoLTZ6Ii8+DQo8L3N2Zz4NCg==') no-repeat center / contain;
      }
    }

    .popover-container {
      width: 100%;

      .popover-origin .popover-content-wrapper .popover-content {
        background-color: #ffffff;
      }

      input {
        width: 100%;
      }
    }

    .c-pane-container {
      background-color: transparent !important;
    }

    .c-day-content {
      font-size: @mini-fs;
      font-weight: 400;
      color: inherit;

      div {
        color: inherit;
      }
    }

    .c-weekdays {
      border-bottom: 1px solid @color-divider-gray;
      padding-bottom: @padding-small / 2;
    }

    .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title {

    }

    .c-pane-container {
      font-family: @font;
      padding: 0 @padding-small;
    }

  }
}