@import '../../theme/conf';
.weather-wrap {
    display: flex;
    flex-direction: column;
    background: url(https://api.dujin.org/bing/1366.php);
    background-size: 100% 100%;
}

.weather-content {
    padding: 5px 0;
    flex: 1;
    height: auto;
    @include linear-gradient(to top, rgba($card-bg, .7), transparent);
    .type {
        display: block;
        font-size: 10em;
        text-align: center;
        @include text-shadow( 6px 6px 10px rgba($black, .5));
    }
    .low-high {
        display: block;
        font-size: 2em;
        text-align: center;
    }
}

.weather-bottom {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 100px;
    background: rgba($card-bg, .5);
    border-top: 1px solid rgba($border-color, .3);
    .forecast-item-wrap {
        flex: 1;
        background: transparent;
        border: none;
        border-right: 1px solid rgba($border-color, .3);
        outline: none;
        text-align: center;
        .icon {
            font-size: 3em;
        }
        span {
            display: block;
            font-size: $sm-text;
        }
        &:last-child {
            border-right: none;
        }
    }
    .active {
        border-top: 2px solid $primary;
    }
}
