/**
 * Float panel

 * @author Alex Kovalev <alex.kovalevv@gmail.com>
 * @copyright Webcraftic 26.08.2019
 */

.wam-float-panel {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  height: 62px;
  padding: 0 20px;
  margin: 0;
  color: #FFF;
  background: #23282d;
  font-size: 16px;
  border-top: 2px solid #ffcb1e;

  &__premium {
    position: relative;
    display: block;
    width: 20px;
    height: 40px;
    background: #ffcb1e;
    margin-left: -30px;

    &:hover {
      cursor: pointer;
    }

    .wam-tooltip {
      position: relative;
      right: -30px;
      top: 8px;
      font-size: 12px;
      font-weight: bold;
      font-style: normal;
      color: #ffffff;
      background: #f22714;
      width: 45px;
      text-align: center;
      border-radius: 3px;
      padding: 5px 0 5px 0;
      line-height: 1.2;
    }

    &:after {
      display: block;
      content: '';
      position: absolute;
      top: 1px;
      left: 0;
      width: 19px;
      height: 38px;
      background: #23282d;
    }
  }

  &__left,
  &__right {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -ms-flex-align: center;
  }

  &__left {
    min-width: 800px;
    margin: 0 44px 0 0;
  }

  &__logo {
    width: 38px;
    height: 32px;
    margin: 0 44px 0 0;
    background: url("data:image/png;base64,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");
  }

  &__data {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    margin: 0 -22px;
    padding: 0;
    list-style: none;
  }

  &__data:not(:last-child) {
    margin-right: 22px;
  }

  &__data-item {
    margin: 0 22px;
    color: #909090;
    text-align: center;
    vertical-align: top;
    padding: 8px 0 8px;
  }

  &__data-hidden {
    display: none;
    margin: 0 44px 0 0;
  }

  &__data-hidden img {
    vertical-align: middle;
  }

  &__item_value {
    font-size: 15px;
    color: #d0d0d0;
    background: #4c4c4c;
    border-radius: 2px;
    padding: 2px 5px;
  }

  &__reset,
  &__save {
    &, &.input[type="submit"] {
      display: inline-block;
      padding: 8px 15px 7px;
      cursor: pointer;
      transition: .1s;
      vertical-align: middle;
      text-transform: uppercase !important;
      border: none;
      border-radius: 2px;
      font-size: 14px;
      line-height: 1.5;
      color: #222 !important;
    }

  }

  &__reset:hover,
  &__save:hover,
  &__reset:focus,
  &__save:focus {
    outline: none;
    text-decoration: none;
  }

  &__reset:active,
  &__save:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }

  &__reset {
    &, &.input[type="submit"] {
      margin: 0 10px 0 0;
      padding-right: 30px;
      padding-left: 30px;
      background: #E1E5E9;
      box-shadow: 0 4px #A8AEB3 !important;
    }
  }

  &__reset:hover,
  &__reset:focus {
    background: #E7EAED !important;
  }

  &__reset:active {
    box-shadow: 0 2px #A8AEB3 !important;
  }

  &__save {
    &, &.input[type="submit"] {
      margin: 0 10px 0 0;
      padding-right: 30px;
      padding-left: 30px;
      color: #222 !important;
      background: #FFCB1E !important;;
      box-shadow: 0 4px #BF9A17 !important;
    }

    &:hover, &:focus {
      background: #FFD340 !important;
      box-shadow: 0 4px #BF9A17 !important;
    }

    &:active {
      background: #FFD340 !important;
      box-shadow: 0 2px #BF9A17 !important;
    }

    & + div {
      margin: 0;
    }
  }

  &__checkbox {
    cursor: pointer;
    font-size: 15px;
    transform: none;
  }

  &__checkbox-text, &__checkbox-text-premium {
    position: relative;
    padding: 0 0 0 26px;

    &::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;
      width: 20px;
      height: 20px;
      border-radius: 2px;
      background: #ffcb1e;
    }
  }

  &__checkbox-input {
    &:checked {
      & + .wam-float-panel__checkbox-text, & + .wam-float-panel__checkbox-text-premium {
        &::after {
          content: "";
          position: absolute;
          top: 5px;
          left: 6px;
          width: 8px;
          height: 5px;
          -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
          border: solid #444;
          border-width: 0 0 2px 2px;
        }
      }
    }
  }

  &__checkbox-text-premium {
    display: inline;
    color: rgba(245, 245, 245, 0.3);

    b {
      display: inline-block;
      font-size: 9px;
      font-weight: 700;
      color: #fff;
      background: #f22714;
      width: 25px;
      padding: 3px 0;
      text-align: center;
      vertical-align: top;
      border-radius: 3px;
      line-height: 1.5;
    }

    &::before {
      background: rgba(245, 245, 245, 0.3);
    }
  }

  &__close, &__close:hover {
    width: 36px;
    height: 36px;
    margin: 0 20px 0 20px;
    cursor: pointer;
    transition: .2s;
    border: 4px solid #FFF;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='%23FFF' d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'/%3E%3C/svg%3E") no-repeat 50% 0px;

    &:hover {
      //opacity: .7;
      //background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='%23FFF' d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'/%3E%3C/svg%3E") no-repeat 50% 0px !important;
    }

    &:focus {
      opacity: .5;
      outline: none;
    }
  }
}