/*!*******************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/style.css ***!
  \*******************************************************************************************************************************************************************/
body {
    background: #ffffff;
}

.hugeicons-icons-list {
    display: block;
    margin: 0;
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 transparent;
}

.hugeicons-icons-list__content {
    height: 100%;
}

.hugeicons-icons-list__content img {
    filter: none;
}

.hugeicons-icons-list__content__filter {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 0 0 20px 0;
}

/* Search input styling */
.hugeicons-icons-list__content__filter__search {
    flex: 0 0 50%;
    background-color: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 100px;
    padding: 12px 20px;
    margin: 0;
    position: relative;
}

.hugeicons-icons-list__content__filter__search input {
    background-color: transparent;
    color: #333;
    border: none;
    outline: none;
    font-size: 15px;
    width: 100%;
    padding-right: 30px;
}

.hugeicons-icons-list__content__filter__search::before {
    content: "🔍";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 14px;
}

/* Dropdowns container */
.hugeicons-icons-list__content__filter__categories,
.hugeicons-icons-list__content__filter__style {
    width: 25%;
}

/* Dropdown styling */
.hugeicons-icons-list__content__filter__categories select,
.hugeicons-icons-list__content__filter__style select {
    background-color: #ffffff;
    color: #333;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    width: 100%;
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23666%27 d=%27M7 10l5 5 5-5z%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 16px center;
    cursor: pointer;
}

/* Dropdown container */
.hugeicons-icons-list__content__filter__dropdowns {
    display: flex;
    gap: 16px;
    flex: 0 0 50%;
    padding-left: 20px;
}

/* Icons grid styling */
.hugeicons-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-bottom: 10px;
    aspect-ratio: 1 / 1;
    background: #ffffff;
}

.hugeicons-icon:hover {
    border-color: #333;
    background-color: #ffffff;
}

.hugeicons-icon--selected {
    border-color: #333;
    background-color: #ffffff;
}

.hugeicons-icon__image {
    width: 28px;
    height: 28px;
}

.hugeicons-icon__name {
    text-align: center;
    font-size: 12px;
    color: #666;
    margin-top: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding: 0 4px;
}

#hugeicons__selected-icon-svg{
    visibility: hidden;
}

.hugeicons-icons-list__content__filter__categories select {
    background-color: #383838;
    color: white;
    border: 1px solid #383838;
    border-radius: 3px;
    padding: 5px;
    font-size: 14px;
    width: 200px;
}

.hugeicons-icons-list__sidebar,
.hugeicons-icons-list__sidebar__category,
.hugeicons-icons-list__sidebar__category--selected {
    display: none;
}

/* Style dropdowns container */
.hugeicons-icons-list__content__filter__style {
    flex: 1;
    width: auto;
}

.hugeicons-icons-list__content__filter__style select {
    width: 100%;
    background-color: #ffffff;
    color: #333;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23666%27 d=%27M7 10l5 5 5-5z%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 16px center;
    cursor: pointer;
}

/* Optional: Add focus styles without outline */
.hugeicons-icons-list__content__filter__search input:focus {
    /* You can add subtle focus styles here if needed */
    box-shadow: none;
}

.hugeicons-icons-list__content__grid-container {
    background-color: #f8f8f8;
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 transparent;
}

.hugeicons-icons-list__content__grid-container::-webkit-scrollbar {
    width: 8px;
}

.hugeicons-icons-list__content__grid-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.hugeicons-icons-list__content__grid-container::-webkit-scrollbar-thumb {
    background-color: #d4d4d4;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.hugeicons-icons-list__content__grid-container::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8;
}
