@use '../../../../mx-core/src/base/shape';

:host {
  @extend .rounded-x-sm;

  display: flex;
  box-sizing: border-box;
  height: 48px !important;
  gap: 8px;
  align-items: center;
  padding: 0 8px;
  justify-content: space-between;
  cursor: pointer;

  &.mx-side-nav-select__close {
    justify-content: center;
  }

  .mat-icon {
    width: inherit;
    height: inherit;
  }

  .mx-side-nav-select {
    &__left-icon {
      width: 24px;
      height: 24px;
    }

    &__name {
      flex: 1;
      white-space: nowrap;
    }

    &__right-icon {
      width: 18px;
      height: 18px;
    }
  }
}