@import "../../styles/index.scss";

.ia-menu {
  .menu-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: $whiteColor;
    padding-bottom: 0px;
    width: 260px;
    border-radius: $borderRadiusLarge $borderRadiusLarge 0 0;
    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // Add subtle shadow to separate from content

    .MuiRadioGroup-row {
      margin-bottom: 8px;
    }

    .MuiTextField-root {
      .MuiInputBase-root {
        border-radius: $borderRadius;
        background-color: $offWhiteColor;
        .MuiInputAdornment-root {
          color: $lightGrayColor;
        }
      }
    }
    .menu-header-search-container {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0px 16px;

      .menu-header-search-icon {
        width: 14px;
      }

      .menu-header-search-input {
        width: 100%;
        padding: 8px 0px;
        border: 1px solid $menuBorderColor;
        border-radius: $borderRadius;
        font-size: 14px;
        outline: none;
        border: none;
        &::placeholder {
          color: $lightGrayColor; // #b4bac7
        }
      }
    }
    .menu-header-radio-group-container {
      border-bottom: 1px solid $menuBorderColor;
      margin-bottom: 8px;
      .MuiFormGroup-root.orientation-row {
        padding: 2px 12px;
      }
    }
    .menu-header-radio-group {
      display: flex;
      justify-content: space-between;
    }

    .MuiFormGroup-root.orientation-row {
      padding: 0 8px;
    }
    .MuiButtonBase-root {
      padding: 0 8px;
    }
    .select-all-option {
      padding: 0 12px;
      margin-right: 12px;
    }
  }

  .select-all-option {
    display: flex;
    justify-content: space-between;

    .MuiCheckbox-root {
      padding: 0;
      margin-right: 8px;
    }
    .select-all-text {
      flex-grow: 1;
      font-weight: 500;
      color: $darkColor !important;
    }
    .clear-text {
      color: $color-text-secondary;
      cursor: pointer;
      font-weight: 500;
    }
  }

  .menu-list-container {
    padding-top: 0;
    padding-bottom: 0;
    max-height: 250px; // Adjust as needed
    overflow-y: auto;
  }

  .menu-option {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    &.selected {
      background-color: $infoBackground;
    }
    .MuiCheckbox-root {
      padding: 0;
      margin-right: 8px;
    }
    .menu-option-label {
      flex-grow: 1;
    }
  }

  .ia-menu-action-button-container {
    // padding: 8px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
}
