/* Colors for icons */
i.resource-icon.is-orangered {
    color: #FE640A;
}
i.resource-icon.is-blurple {
    color: #7289DA;
}
i.resource-icon.is-teal {
    color: #95DBE5;
}
i.resource-icon.is-youtube-red {
    color: #BB0000;
}
i.resource-icon.is-black {
    color: #2c3334;
}

/* Colors when icons are hovered */
i.resource-icon.is-hoverable:hover {
    filter: brightness(125%);
}
i.resource-icon.is-hoverable.is-black:hover {
    filter: brightness(170%);
}
i.resource-icon.is-hoverable.is-teal:hover {
    filter: brightness(80%);
}

/* Icon padding */
.breadcrumb-section {
    padding: 1rem;
}
i.has-icon-padding {
    padding: 0 10px 25px 0;
}
#tab-content p {
    display: none;
}
#tab-content p.is-active {
display: block;
}

/* Disable highlighting for all text in the filters. */
.filter-checkbox,
.filter-panel label,
.card-header span {
    user-select: none
}

/* Remove pointless margin in panel header */
#filter-panel-header {
    margin-bottom: 0;
}

/* Full width filter cards */
#resource-filtering-panel .card .collapsible-content .card-content {
    padding:0
}

/* Don't round the corners of the collapsibles */
.filter-category-header {
    border-radius: 0;
}

/* Hide the no resources h2 by default */
h2.no-resources-found {
    display: none;
    margin-top: 1em;
}

/* Disable clicking on the checkbox itself. */
/* Instead, we want to let the anchor tag handle clicks. */
.filter-checkbox {
    pointer-events: none;
}

/* Blurple category icons */
i.is-primary {
    color: #7289da;
}

/* A little space around the filter card, please! */
.filter-tags {
    padding-bottom: .5em;
    padding-right: .5em;
}

/* Set default display to inline-flex, for centering. */
span.filter-box-tag {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

/* Make resource tags clickable */
.resource-tag {
    cursor: pointer;
    user-select: none;
}

/* When hovering tags, brighten them a bit. */
.resource-tag:hover,
.filter-box-tag:hover {
    filter: brightness(95%);
}

/* Move the x down 1 pixel to align center */
button.delete {
    margin-top: 1px;
}

/* Colors for delete button x's */
button.delete.is-primary::before,
button.delete.is-primary::after {
    background-color: #2a45a2;
}
button.delete.is-success::before,
button.delete.is-success::after {
    background-color: #2c9659;
}
button.delete.is-danger::before,
button.delete.is-danger::after {
    background-color: #c32841;
}
button.delete.is-info::before,
button.delete.is-info::after {
    background-color: #237fbd;
}

/* Give outlines to active tags */
span.filter-box-tag,
span.resource-tag.active {
    outline-width: 1px;
    outline-style: solid;
}

/* Make filter tags sparkle when selected! */
@keyframes glow_success {
    from { box-shadow: 0 0 2px 2px #aef4af; }
    33% { box-shadow: 0 0 2px 2px #87af7a; }
    66% { box-shadow: 0 0 2px 2px #9ceaac; }
    to { box-shadow: 0 0 2px 2px #7cbf64; }
}

@keyframes glow_primary {
    from { box-shadow: 0 0 2px 2px #aeb8f3; }
    33% { box-shadow: 0 0 2px 2px #909ed9; }
    66% { box-shadow: 0 0 2px 2px #6d7ed4; }
    to { box-shadow: 0 0 2px 2px #6383b3; }
}

@keyframes glow_danger {
    from { box-shadow: 0 0 2px 2px #c9495f; }
    33% { box-shadow: 0 0 2px 2px #92486f; }
    66% { box-shadow: 0 0 2px 2px #d455ba; }
    to { box-shadow: 0 0 2px 2px #ff8192; }
}
@keyframes glow_info {
    from { box-shadow: 0 0 2px 2px #4592c9; }
    33% { box-shadow: 0 0 2px 2px #6196bb; }
    66% { box-shadow: 0 0 2px 2px #5adade; }
    to { box-shadow: 0 0 2px 2px #6bcfdc; }
}

span.resource-tag.active.is-primary {
    animation: glow_primary 4s infinite alternate;
}
span.resource-tag.active.has-background-danger-light {
    animation: glow_danger 4s infinite alternate;
}
span.resource-tag.active.has-background-success-light {
    animation: glow_success 4s infinite alternate;
}
span.resource-tag.active.has-background-info-light {
    animation: glow_info 4s infinite alternate;
}