@import "../variables";

@keyframes floatingAnim {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0%);
  }
}

.floating-box {
  width: 30%;
  margin-left: auto;
  margin-top: auto;
  background-color: white;
  box-shadow: 0px 4px 20px rgba(76, 99, 210, 0.2);
  animation: floatingAnim 0.3s linear;
  transition: opacity 0s;

  &.sm {
    width: 30%;
  }

  &.md {
    width: 50%;
  }

  &.lg {
    width: 75%;
  }

  &.xl {
    width: 90%;
  }

  &.all {
    --left-width: #{$left-part-width};
    width: calc(100% - var(--left-width));
  }

  @media only screen and (max-width: $breakpoints-xl) {
    &.sm {
      width: 50%;
    }

    &.md {
      width: 75%;
    }

    &.lg,
    &.xl,
    &.all {
      width: 95%;
    }
  }

  @media only screen and (max-width: $breakpoints-md) {
    &.sm {
      width: 75%;
    }

    &.md,
    &.lg,
    &.xl,
    &.all {
      width: 95%;
    }
  }

  @media only screen and (max-width: $breakpoints-sm) {

    &.sm,
    &.md,
    &.lg,
    &.xl,
    &.all {
      width: 95%;
    }
  }

  >div,
  >div>div {
    height: 100%;
    padding: 0;
  }

  >div>div {
    display: block;

    floating-box-view.header-footer-fixed {
      >.header-footer-fixed {

        &__header,
        &__content,
        &__footer {
          padding: 0.5em;

          >span {
            display: grid;
            grid-template-columns: auto;
            justify-content: space-between;
            grid-template-areas: "btn1 btn2";
            width: 100%;

            >ui-button {
              &:first-child {
                grid-area: btn1;
              }

              &:last-child {
                grid-area: btn2;
              }
            }
          }
        }

        &__header {
          display: flex;
          align-items: center;
          justify-content: space-between;

          >.header-footer-fixed__header__title {
            font-weight: 600;
            font-size: 20px;
            line-height: 28px;
          }
        }

        &__content {
          .col-def-filter {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 5px 0;

            .number-filter-input {
              margin-top: 12px;
            }
          }
        }

        &__footer {
          margin-top: auto;
        }
      }

      &.view-parameter-box>.header-footer-fixed__footer {
        display: none;
      }
    }
  }
}

body.condensed {
  .floating-box {
    &.all {
      --left-width-condensed: #{$left-part-condensed-width};
      width: calc(100% - var(--left-width-condensed));
    }
  }
}

.view-parameter-box,
.ag-grid-view-box,
.filter-view-box {
  >.header-footer-fixed__content {
    padding-right: 30px;
    padding-left: 40px;
  }
}

.ag-grid-view-box>.header-footer-fixed__content>.header-footer-fixed>div {
  &:first-child {
    margin-bottom: 25px;

    >div {
      margin-top: 15px;
    }
  }
}

.view-parameter-box,
.ag-grid-view-box {
  .input-search {
    //margin-bottom: 25px;
  }

  .header-footer-fixed__content>.header-footer-fixed>.header-footer-fixed__content {
    ui-anchor-tab {
      margin-top: 0;
    }
  }
}

.floating-box>div>div floating-box-view.header-footer-fixed>.header-footer-fixed__content {
  padding: 10px 15px;
}

.range-footer {
  display: flex;
  flex-direction: column;

  >div {
    height: 30px;
  }

  >div>ui-checkbox.ui-option,
  >ui-checkbox.ui-option {
    margin: 10px;
  }

  .date-filter-reset {
    width: 100%;
    margin: 0;
    border-radius: 0;
    border: none !important;
    background-color: var(--primary-10, rgba($primary, 0.1));
    padding: 5px;
  }
}

.date-filter {
  min-width: 270px;
}