.ico {
    --icon-size: 24px;
    --icon-color: var(--bs-black);
    --bs-btn-bg: var(--icon-color);

    display: block;
    width: var(--icon-size);
    height: var(--icon-size);

    mask-repeat: no-repeat;
    mask-size: contain;

    mask-image: var(--icon-url);
    background-color: var(--icon-color);
}

img.ico {
    background-color: transparent;
}

.ico-container {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: white;
    border-radius: 8px;
    border: 1px solid var(--primary-500);

    padding: 8px;
}

.btn-ico,
.btn-mini,
.ico-difficulty {
    position: relative;
    width: 40px;
    height: 40px;
}

.btn-ico {
    --bs-btn-border-radius: 50%;
}

.ico-difficulty {
    border-radius: 8px;
}

.btn-ico .ico,
.btn-mini .ico,
.ico-difficulty .ico {
    --icon-size: 24px;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ico-difficulty .ico {
    --icon-color: white;
}

.ico-difficulty.easier {
    background-color: var(--primary-500);
}

.ico-difficulty.easier .ico {
    background-color: var(--primary-900);
}

.ico-difficulty.easy {
    background-color: var(--secondary-600);
}

.ico-difficulty.avg {
    background-color: var(--tertiary-600);
}

.ico-difficulty.hard {
    background-color: var(--primary-900);
}

.ico-difficulty.undefined {
    border: 1px solid var(--base-grey);
    background-color: white;
}

.ico-difficulty.undefined .ico {
    --icon-color: var(--base-grey);
}

.ico-smallest {
    --icon-size: 12px;
}

.ico-smaller {
    --icon-size: 16px;
}

.ico-small {
    --icon-size: 20px;
}

.ico-big {
    --icon-size: 32px;
}

.ico-bigger {
    --icon-size: 48px;
}

.ico-xl {
    --icon-size: 64px;
}

.ico-light {
    --icon-color: var(--primary-800);
}

.ico-parameters {
    --icon-url: url('svg/AdjustmentsOutline.svg');
}

.ico-arrow-left {
    --icon-url: url('svg/ArrowLeftOutline.svg');
}

.ico-arrow-right {
    --icon-url: url('svg/ArrowRightOutline.svg');
}

.ico-expand {
    --icon-url: url('svg/ArrowsExpandOutline.svg');
}

.ico-bdc {
    --icon-url: url('svg/BDC.svg');
}

.ico-bell {
    --icon-url: url('svg/BellOutline.svg');
}

.ico-bookopen {
    --icon-url: url('svg/BookOpenOutline.svg');
}

.ico-calendar {
    --icon-url: url('svg/CalendarOutline.svg');
}

.ico-camera {
    --icon-url: url('svg/CameraOutline.svg');
}

.ico-chevron-down {
    --icon-url: url('svg/ChevronDownOutline.svg');
}

.ico-chevron-right {
    --icon-url: url('svg/ChevronRightOutline.svg');
}

.ico-clock {
    --icon-url: url('svg/ClockOutline.svg');
}

.ico-cog {
    --icon-url: url('svg/CogOutline.svg');
}

.ico-google {
    --icon-url: url('svg/devicon_google.svg');
}

.ico-download {
    --icon-url: url('svg/DownloadOutline.svg');
}

.ico-flag {
    --icon-url: url('svg/FlagOutline.svg');
}

.ico-globe {
    --icon-url: url('svg/GlobeOutline.svg');
}

.ico-globe-light {
    --icon-url: url('svg/GlobeOutlineLight.svg');
}

.ico-location {
    --icon-url: url('svg/GPS-Loc.svg');
}

.ico-heart {
    --icon-url: url('svg/HeartOutline.svg');
}

.ico-heart-fill {
    --icon-url: url('svg/Heart.svg');
}

.ico-home {
    --icon-url: url('svg/HomeOutline.svg');
}

.ico-home-fill {
    --icon-url: url('svg/Home.svg');
}

.ico-apple {
    --icon-url: url('svg/ic_baseline-apple.svg');
}

.ico-map {
    --icon-url: url('svg/ic_outline-map.svg');
}

.ico-info {
    --icon-url: url('svg/InformationCircleOutline.svg');
}

.ico-info-light {
    --icon-url: url('svg/InformationCircleOutlineLight.svg');
}

.ico-lightning {
    --icon-url: url('svg/LightningBold.svg');
}

.ico-pos {
    --icon-url: url('svg/LocationMarkerOutline.svg');
}

.ico-logout {
    --icon-url: url('svg/LogoutOutline.svg');
}

.ico-select-pos {
    --icon-url: url('svg/mage_location-fill.svg');
}

.ico-android {
    --icon-url: url('svg/material-symbols_android.svg');
}

.ico-double-arrow {
    --icon-url: url('svg/material-symbols_arrow-range-rounded.svg');
}

.ico-burger {
    --icon-url: url('svg/MenuAlt3Outline.svg');
}

.ico-pause {
    --icon-url: url('svg/Pause.svg');
}

.ico-pencil {
    --icon-url: url('svg/PencilAltOutline.svg');
}

.ico-play {
    --icon-url: url('svg/Play.svg');
}

.ico-plus {
    --icon-url: url('svg/PlusOutline.svg');
}

.ico-search-fill {
    --icon-url: url('svg/Search.svg');
}

.ico-search {
    --icon-url: url('svg/SearchOutline.svg');
}

.ico-separator {
    --icon-url: url('svg/Separator.svg');
}

.ico-share {
    --icon-url: url('svg/ShareOutline.svg');
}

.ico-share-light {
    --icon-url: url('svg/ShareOutlineLight.svg');
}

.ico-speaker {
    --icon-url: url('svg/SpeakerphoneOutline.svg');
}

.ico-star {
    --icon-url: url('svg/StarOutline.svg');
}

.ico-star-fill {
    --icon-url: url('svg/StarFill.svg');
}

.ico-trash {
    --icon-url: url('svg/TrashOutline.svg');
}

.ico-trendingup {
    --icon-url: url('svg/TrendingUpOutline.svg');
}

.ico-user {
    --icon-url: url('svg/UserOutline.svg');
}

.ico-users {
    --icon-url: url('svg/UsersOutline.svg');
}

.ico-grid {
    --icon-url: url('svg/ViewGridOutline.svg');
}

.ico-grid-fill {
    --icon-url: url('svg/ViewGrid.svg');
}

.ico-x {
    --icon-url: url('svg/XOutline.svg');
}

.ico-facebook {
    --icon-url: url('svg/mdi_facebook.svg');
}

.ico-instagram {
    --icon-url: url('svg/mdi_instagram.svg');
}

.ico-ellipsis-horizontal {
    --icon-url: url('svg/EllipsisHorizontal.svg');
}

.ico-document-outline {
    --icon-url: url('svg/DocumentOutline.svg');
}

.ico-external-link {
    --icon-url: url('svg/ExternalLinkOutline.svg');
}

.ico-note {
    --icon-url: url('svg/page-flip.svg');
}

.ico-key {
    --icon-url: url('svg/KeyOutline.svg');
}