$action-bar-font-size: rem-calc(14);
$action-bar-font-weight: 600;
$action-bar-checkbox-space-left: rem-calc(16);
$action-bar-input-width: rem-calc(90);

.actions-bar{
  padding: rem-calc(15) rem-calc(0);
  box-sizing: border-box;
  transition: bottom 0.2s linear, opacity 0.2s linear;
  opacity: 0;
  z-index: -10;
  background-color: $color-pattens-blue;
  color: $color-lochmara;
  font-size: $action-bar-font-size;
  font-weight: $action-bar-font-weight;
  border-top: 1px solid #d2ecf7;

  &.active{
    opacity: 1;
    z-index: 999;
  }

  &.buttons-bar{
    z-index: 10;
    bottom: 0;
    left: 0;
    padding: rem-calc(15) rem-calc(20);
  }

  .dropdown-menu {
    font-weight: 400;
  }

  .close-buttons-bar{
    font-size: $font-size-x-small;
    color: $color-lochmara;
    font-weight: 400;
    margin-right: rem-calc(18);
  }

  table {
    width: 100%;
    tr {
      display: flex;
      align-items: center;
      position: relative;
      td {
        display: flex;
        align-items: center;
        &.checkbox {
          width: 16px;
          @include breakpoint(md down) {
            position: absolute;
            top: 0;
            left: 8px;
          }
        }

        &.actions {
          overflow: visible !important;
          padding: 0 20px;
          width: 100%;
          @include breakpoint(md down) {
            flex-direction: column;
            align-items: flex-start;
            > section {
              padding: 0;
              padding-bottom: 5px;
              .bootstrap-select {
                margin-bottom: 5px;
                width: 100%;
              }
              &:first-child {
                align-self: flex-start;
                margin: 3px 0 10px;
              }
              &.cancel-section {
                order: 1;
                margin-top: -33px;
              }
              &:last-child {
                text-align: right;
              }
            }

          }
          .choose-label {
            white-space: nowrap;
            @include breakpoint(md down) {
              margin-left: rem-calc(25);
            }
          }
          > section {
            @include breakpoint(md down) {
              width: 100%;
            }
          }
          .cancel-section{
            margin-left: auto;
            a{
              font-weight: 400;
            }
          }

          section{
            @include breakpoint(md) {
              padding: 0 5px;
            }
            &:last-child{
              padding-right: 0;
            }
          }

          .bootstrap-select {
            display: inline-block;
            @include breakpoint(md){
              width: 150px !important;
            }

            &.hide {
              display: none;
            }

            button{
              color: $color-outer-space !important;
              background-color: $color-white;
              border: rem-calc(1) solid $color-athens-gray;
            }

            &.error{
              button{
                border-color: $color-mandy;
              }
            }
          }

          .additional-data,
          .send-email,
          .return-to-stock {
            @include breakpoint(md down) {
              width: 100%;
              display: block;
            }
          }

          .additional-data >,
          .send-email,
          .return-to-stock {

            input[type="text"] {
              width: $action-bar-input-width;

            }

          }

          .send-email, .return-to-stock {
            line-height: 33px;

            label {
              align-items: center;
            }

            .checkbox {
              padding-left: 0;
            }

            .input-checkbox + label:before{
              margin-right: 0;
            }

            i {
              vertical-align: middle;
              &:before {
                font-size: rem-calc(22);
                position: relative;
              }

            }
          }
        }
      }
    }
  }

  .additional-data{
    #price-description-popover, #quantity-description-popover{
      display: none;
    }
  }

  .checkbox{
    padding-left: $action-bar-checkbox-space-left;
    //padding-right: 25px;

  }

  .actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .action-types {
    max-width: 150px;
    margin-right: 10px;
  }

  &.active {
    opacity: 1;
    z-index: 10;
    bottom: 0;
    left:0;
  }
}