// Dropdown status vars
$dropdown-offset-border: 1px solid $dropdown-border-color !important;

.x-dropdown-offset-240:not(.ng-dropdown-panel) {
  min-width: map-get($x-min-widths, 240) !important;
  }

.x-dropdown-offset-180:not(.ng-dropdown-panel) {
    min-width: map-get($x-min-widths, 180) !important;
    }

// theres two versions of the DOM for this components dependant on the append to boddy parameter
// the implementation approach works with both options
.ng-dropdown-panel.x-dropdown-offset-240,
.x-dropdown-offset-240 .ng-dropdown-panel {
  // adding up the offset to the original width of the element to create offset effect
  min-width: map-get($x-min-widths, 240) + map-get($x-min-widths, 120) !important;
}
.ng-dropdown-panel.x-dropdown-offset-180,
.x-dropdown-offset-180 .ng-dropdown-panel {
  // adding up the offset to the original width of the element to create offset effect
  min-width: map-get($x-min-widths, 180) + map-get($x-min-widths, 120) !important;
}

.ng-dropdown-panel.x-dropdown-offset-240,
.ng-dropdown-panel.x-dropdown-offset-180,
.x-dropdown-offset-240 .ng-dropdown-panel,
.x-dropdown-offset-180 .ng-dropdown-panel {
  // aligning element the element to create offset effect
  margin-left: - map-get($x-min-widths, 120) !important;
  border-bottom-right-radius:  $border-radius-sm;
  border-bottom-left-radius:  $border-radius-sm;

  .ng-dropdown-header {
    border-top-left-radius: $border-radius-sm !important;
    border: $dropdown-offset-border;
    padding: 0 !important;

    .x-offset-tabs-container, a.nav-link {
      width: 100%;
    }
    .nav-item {
      width: 50%;
      &:first-child {
        border-top-left-radius: $border-radius-sm !important;
      }
    }
  }

  .ng-dropdown-panel-items {
    border: 0;
    border-bottom-left-radius:  $border-radius-sm !important;
    border-bottom: $dropdown-offset-border;
  }

  .ng-option{
    border-top-right-radius:  0 !important;
    border-top-left-radius:  0 !important;
    border-left: $dropdown-offset-border;
    border-right: $dropdown-offset-border;
    box-shadow: 0 !important;

    * {
      margin-bottom: 0 !important;
    }

    .x-icon-container{
      visibility: hidden;
    }

    &:hover {
      background-color: theme-color('light-secondary') !important;

      .x-icon-container{
        visibility: visible;
        @include transition(visibility 0.5s ease-in-out 0.2s);
      }
    }
  }
}