<template>
  <div class="Temperature-wrapper">
    <div class="temperature">{{ weather.temperature_Now }}°</div>
    <i class="iconfont weather-icon" :class="icon.icon"></i>
  </div>
</template>

<script setup>
import { useWeather } from '@/composables/useWeather'

const { weather, icon } = useWeather()
</script>

<style lang="scss" scoped>
.Temperature-wrapper {
  position: fixed;
  top: 48px;
  right: 68px;
  height: 44px;
  display: flex;
  align-items: center;
}
.weather-icon {
  color: #000000;
  font-size: 36px;
  font-weight: bolder;
  font-family: 'font_bold';
}
.temperature {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: 0.05em;
  color: #000000;
  margin-right: 12px;
}
</style>
