/**
 * SVG Icon Styles
 * Ersetzt Font Awesome Icons durch leichtgewichtige Inline SVGs
 * 
 * @package Sonnenhof
 * @since 2.0.1
 */

/* -- =SVG Icon Base Styles
================================================================ */
.icon {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    stroke-width: 2;
    stroke: currentColor;
    fill: none;
}

/* -- =Icon Sizes
================================================================ */
.icon-menu {
    width: 24px;
    height: 24px;
}

.icon-play {
    width: 64px;
    height: 64px;
}

.icon-arrow-left,
.icon-arrow-right {
    width: 24px;
    height: 24px;
}

/* -- =Icon Animations
================================================================ */
.icon {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

a:hover .icon {
    transform: scale(1.1);
}

/* -- =Mobile Navigation Icon
================================================================ */
#btn-navigation-mobile .icon-menu {
    stroke: #fff;
}

#btn-navigation-mobile:hover .icon-menu {
    stroke: #cab37a;
}

/* -- =Canvas Play Icon
================================================================ */
.canvas-play a .icon-play {
    stroke: #fff !important;
    fill: none !important;
}

.canvas-play a .icon-play circle {
    stroke: #fff !important;
    fill: none !important;
}

.canvas-play a .icon-play polygon {
    fill: #fff !important;
    stroke: none !important;
}

.canvas-play a:hover .icon-play {
    stroke: #cab37a !important;
}

.canvas-play a:hover .icon-play circle {
    stroke: #cab37a !important;
}

.canvas-play a:hover .icon-play polygon {
    fill: #cab37a !important;
}

/* -- =Wine Navigation Icons
================================================================ */
.wine-navigation .icon-arrow-left,
.wine-navigation .icon-arrow-right {
    stroke: #fff !important;
    fill: none !important;
}

.wine-navigation .button a {
    color: #fff;
}

.wine-navigation a:hover .icon {
    transform: translateX(0);
    stroke: #cab37a !important;
}

.wine-navigation .back a:hover .icon-arrow-left {
    transform: translateX(-3px);
}

.wine-navigation .for a:hover .icon-arrow-right {
    transform: translateX(3px);
}

/* -- =Accessibility
================================================================ */
.icon[aria-hidden="true"] {
    pointer-events: none;
}