/*
    Icon sizes
*/
.icon-size-225 {
    width: 2.25rem;
    height: 2.25rem;
}

.icon-size-150 {
    width: 1.50rem;
    height: 1.50rem;
}

.icon-size-125 {
    width: 1.25rem;
    height: 1.25rem;
}

.icon-size-100 {
    width: 1.00rem;
    height: 1.00rem;
}

.icon-size-75 {
    width: .75rem;
    height: .75rem;
}

/*
    Icon colours
*/
.icon-colour-gray {
    background-color: #5B6571;
}

.icon-colour-white {
    background-color: var(--bjp-even-lighter-journal-color);
}

.icon-colour-journal {
    background-color: var(--bjp-journal-color);
}

.icon-colour-hover-darker:hover {
    background-color: var(--bjp-darker-journal-color);
}

.icon-colour-bjp-green {
    background-color: #6bb7a5; /* TM: this colour is weird, should it be one of the bjp journal colours? */
}

/*
    Icon resources
*/
.icon-mask {
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    display: inline-block;
}

.icon-shopping-cart {
    mask-image: url("/images/icon-trolley-grey.svg");
    -webkit-mask-image: url("/images/icon-trolley-grey.svg");
}

.icon-arrow-right {
    mask-image: url("/images/icon-arrow-right-grey.svg");
    -webkit-mask-image: url("/images/icon-arrow-right-grey.svg");
}

.icon-arrow-left {
    mask-image: url("/images/icon-arrow-right-grey.svg");
    -webkit-mask-image: url("/images/icon-arrow-right-grey.svg");
    transform: rotate(180deg);
}

.icon-arrow-down {
    mask-image: url("/images/icon-arrow-right-grey.svg");
    -webkit-mask-image: url("/images/icon-arrow-right-grey.svg");
    transform: rotate(90deg);
}

.icon-arrow-up {
    mask-image: url("/images/icon-arrow-right-grey.svg");
    -webkit-mask-image: url("/images/icon-arrow-right-grey.svg");
    transform: rotate(270deg);
}

.icon-cross {
    mask-image: url("/images/icon-cross-grey.svg");
    -webkit-mask-image: url("/images/icon-cross-grey.svg");
}

.icon-download {
    mask-image: url("/images/icon-download-grey.svg");
    -webkit-mask-image: url("/images/icon-download-grey.svg");
}

.icon-question-mark {
    mask-image: url("/images/icon-search-question-inactive.svg");
    -webkit-mask-image: url("/images/icon-search-question-inactive.svg");
}

.icon-copy {
    mask-image: url("/images/icon-copy-grey.svg");
    -webkit-mask-image: url("/images/icon-copy-grey.svg");
}

/* This svg isn't compatible with the mask-image method */
.icon-envelope {
    background-image: url("/images/icon-envelope-grey.svg");
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.icon-expand {
    mask-image: url("/images/icon-expand-grey.svg");
    -webkit-mask-image: url("/images/icon-expand-grey.svg");
}

.icon-alert {
    mask-image: url("/images/icon-alert-grey.svg");
    -webkit-mask-image: url("/images/icon-alert-grey.svg");
}

.icon-share-grey {
    mask-image: url("/images/icon-share-grey.svg");
    -webkit-mask-image: url("/images/icon-share-grey.svg");
}

.icon-user {
    mask-image: url("/images/icon-user.svg");
    -webkit-mask-image: url("/images/icon-user.svg");
}

.icon-locked {
    mask-image: url("/images/icon-locked.svg");
    -webkit-mask-image: url("/images/icon-locked.svg");
}

.icon-unlocked {
    mask-image: url("/images/icon-unlocked.svg");
    -webkit-mask-image: url("/images/icon-unlocked.svg");
}

.icon-search {
    mask-image: url("/images/icon-search.svg");
    -webkit-mask-image: url("/images/icon-search.svg");
}

.icon-menu {
    mask-image: url("/images/icon-menu.svg");
    -webkit-mask-image: url("/images/icon-menu.svg");
}