@import '../variables';
@import '../theme-colors';

@media (max-width: 575px) {
  body, html {
    font-size: $default-font-size-for-mobile;
  }

  h4 {
    font-size: 1.25rem;
  }

  /*** Start mixins for mobile view ***/
  @keyframes dropdownMenuAnimation {
    from {
      opacity: 0;
      transform: translate3d(0, -30px, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0px, 0);
    }
  }

  .dropdownMenuAnimation {
    animation-name: dropdownMenuAnimation;
    animation-duration: 0.25s;
    animation-fill-mode: both;
  }

  @mixin mobile-filter-dropdown-menu {
    position: fixed !important;
    transform: inherit !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    will-change: initial !important;

    @extend .dropdownMenuAnimation;
  }

  @mixin dropdown-menu-header {
    display: block;
    padding: 1rem 1.9rem;
    background-color: $brand-color;

    .title {
      color: $white;
      font-size: 14px;
    }
    svg {
      color: $white;
      width: 20px;
      height: 20px;
    }
  }

  @mixin mobile-filter-dropdown-action-wrapper {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
    box-shadow: var(--default-box-shadow);

    .col-12 {
      padding: 0;

      .btn {
        width: 50%;
        border-radius: 0;
        padding: 1rem 1.2rem;

        &.btn-clear {
          background-color: var(--base-color);
        }
      }
    }
  }
  /*** End mixins for mobile view ***/

  .p-primary {
    padding: $default-padding-margin-for-mobile !important;
  }

  .px-primary {
    padding-right: $default-padding-margin-for-mobile !important;
    padding-left: $default-padding-margin-for-mobile !important;
  }

  .py-primary {
    padding-top: $default-padding-margin-for-mobile !important;
    padding-bottom: $default-padding-margin-for-mobile !important;
  }

  .pt-primary {
    padding-top: $default-padding-margin-for-mobile !important;
  }

  .pr-primary {
    padding-right: $default-padding-margin-for-mobile !important;
  }

  .pt-primary {
    padding-bottom: $default-padding-margin-for-mobile !important;
  }

  .pt-primary {
    padding-left: $default-padding-margin-for-mobile !important;
  }

  .mt-primary {
    margin-top: $default-padding-margin-for-mobile !important;
  }

  .mr-primary {
    margin-right: $default-padding-margin-for-mobile !important;
  }

  .mb-primary {
    margin-bottom: $default-padding-margin-for-mobile !important;
  }

  .ml-primary {
    margin-left: $default-padding-margin-for-mobile !important;
  }

  .my-primary {
    padding: $default-padding-margin-for-mobile 0 !important;
  }

  .content-wrapper {
    padding: $main-content-wrapper-mobile-padding;
  }

  .navbar {
    .navbar-menu-wrapper {
      .navbar-nav {
        .nav-item.dropdown {
          .dropdown-menu {
            &.navbar-dropdown {
              position: fixed;
              min-width: 100%;
              border-radius: 0;

              &:before {
                display: none;
              }
            }
          }
        }
      }
    }
  }

  /*** Start Breadcrumbs Design for Mobile View ***/
  .breadcrumb-item + .breadcrumb-item {
    padding-left: 0.3rem;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    padding-right: 0;
  }

  .breadcrumb-item {
    h4 {
      max-width: 300px;
    }
  }
  /*** End Breadcrumbs Design for Mobile View ***/

  /*** Start Cards Design for Mobile View ***/
  .card {
    .card-header, .card-body {
      padding: $default-padding-margin-for-mobile;
    }
  }
  /*** End Cards Design for Mobile View ***/

  /*** Start Modals Design for Mobile View ***/
  .modal-dialog {
    margin: 0;
    max-width: 100% !important;

    &.modal-dialog-centered {
      max-height: 100% !important;
    }

    .modal-content {
      outline: 0;
      display: flex;
      position: relative;
      pointer-events: auto;
      flex-direction: column;
      min-width: 100% !important;
      min-height: 100% !important;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      background-clip: padding-box;
      background-color: var(--modal-body-bg);
    }
  }
  /*** End Start Modals Design for Mobile View ***/
}