/*
    \public\assets\css\icon.css

    Example:

    <i class="icon warning" aria-hidden="true"></i>
    <span>Warning.</span>
*/

.icon::before {
    display: inline;
    stroke: currentColor;
    fill: currentColor;
    height: 1em;
    width: auto;
}

.icon:focus::before,
.icon:hover::before {
    outline: 0 !important;
}

.icon.small::before {
    height: smaller;
}
.icon.large::before {
    height: larger;
}
.icon.sup::before {
    vertical-align: super;
    font-size: smaller;
}

/* Visually hide the text after the icon */
.icon + span::before {
    border: 0 !important;
    border-width: 0 !important;
    position: absolute !important;
    width: 2px !important;
    height: 2px !important;
    padding: 0 !important;
    margin: -2px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
}

/* icons */
.icon.hamburger::before {
    content: url(/assets/img/icons/hamburger.svg);
}

.icon.warning::before {
    content: "⚠️";
}
.icon.error::before {
    content: "❌";
}

.icon.close::before {
    content: "✖️";
}

.icon.wales::before {
    content: "🏴󠁧󠁢󠁷󠁬󠁳󠁿";
}

.icon.locked::before {
    content: "🔒";
}
.icon.unlocked::before {
    content: "🔓";
}
.icon.key::before {
    content: "🔑";
}

.icon.search::before {
    content: "🔍";
}
.icon.info::before {
    content: "i️";
}
.icon.help::before,
.icon.question::before {
    content: "❓";
}
.icon.home::before {
    content: "🏠";
}
.icon.settings::before {
    content: "⚙️";
}

.icon.back::before {
    content: "⬅️";
}
.icon.next,
.icon.forward::before {
    content: "➡️";
}
.icon.refresh::before {
    content: "🔄";
}

.icon.user::before {
    content: "👤";
}
.icon.profile::before {
    content: "👤";
}
.icon.users::before {
    content: "👥";
}

.icon.correct::before {
    content: "✅";
}
icon.confirmed::before {
    content: "☑️";
}
.icon.incorrect::before {
    content: "❎";
}
.icon.calendar::before,
.icon.date::before {
    content: "📅";
}
icon.time::before,
icon.clock::before {
    content: "⏰";
}

/* External Characters */

.icon.login::before {
    content: url(\assets\img\icons\login.svg);
}
.icon.logout::before {
    content: url(\assets\img\icons\logout.svg);
}

icon.new-window::before {
    content: url(\assets\img\icons\new-window.svg);
    vertical-align: super;
    font-size: smaller;
}