@import './_var.styl'

.tn-iotLayerControl
  box-sizing border-box
  display flex
  flex-direction column
  position relative
  padding-top: 48px; // 防止猫头偏差
  &__head
    position absolute
    top 0
    left 0
    width 100vw
    height 53px
    background-repeat no-repeat
    background-size 100vw 53px
    background-image url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAABqBAMAAAARjckeAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAbUExURUdwTP///////////////////////////////xb9HQ4AAAAIdFJOUwBW4RmfwXk45LvEXAAAA7lJREFUeNrtnU1zEkEQhqEWlysGUnI1CbrHhEDpETDqHg1ayJGyTMJRo6a8urLYP1u+i/2entnKbDHve96+PDvpeaZni5RK0Vw+vB3SSevds/MSIh/r+9fhCbU+3V0KPX5x49Amrf434JNMtTHcYvRG9eyX1NhRX5G/A0GpPAz3MXr9jNZRHlAoIzQbiRZzE8Z4VkvFPqZIXgA8G/uXKEY/Bbwdg33xqtDkma19EIfRnyQ+H4sdKz6H1b4Cn7B+LZcS8hwwGTlKwjg75z1P9AY0hdNJxhi7fivJz6duCkimmuzSi+kyac/THwAVzDQNox/tNPeUmh6ICqWSjvFl5M/DSS+YwWmEXMZNx+jVxDfVdT4CqkC6WRhDW2s563ks+DyW+yLBBd/MfB4uqeaQsYZSdbILZsCamezlTt7+qbVNAoHSKMrMOqei7g6Hz8XdYxxe6D2FtwQk4uJiGHucXTVW+hHO0TPSNyxHrMCDSqZKJBejYJsh+gC4KXkiirHHazNQSWWJDDaasWgBTUA3MbYwRZ+1DUMl09MUx1gTm+UkHLYQ7pE/OGNkvCiopKpE7rWNMaPCh0omSCSLIrO9QyVVJpGhBl9hVcyBWH40EzD4NqsCKqkokbuZZJNXApVUlMgtRJdXApVUlMjNwd9iluzP7ZFNmL16ORorM0ugkooSuREam1uC+75IKmyGE/HpJVQyJ4lcH4Pa7Brc94VS5iM8Lb3mF/0D6kB+8xH+lSmCSipJ5Hrp8nsTvpUMpitBcM49NuG+LxI5gmOJKqikkkSuJsFS3KGSKhK54u7IlEElVSRyqSaS3HHft829JHeSq8OQZjOakVu3JMkdKqkgkSrcoZLyEqnCHfd9q9j02Nxx37dM89G5Y0gjOZpR5A6VlJZINe6475O438uBOz4dkxvNKHPHkMbVwt14lbRJD3fTVbKpibvhKikvkYrcDf90rE26uButkgoSqcrd6N9G6ZA+7iZPJV2N3A2+4K6QTu7mnp2mWrkbe3aySS93Q3/uzXI1czf0orVLurn7Jh5aq2Pt3I38kfIj0s/dM+/w1KECcDev06h3mVy409wsp7GmVAzudG0U92MqCnf6bBD2X1Qc7vTeGOw/qUjcTQFv5YQ9N+50bcLmah1T0bjTWf3gsV8MqHjcyev/OGjqrxoOFZH74gQ1qh9qt7H2/i1t4bgv0rq6fXp4ub0a5swpb+4IuIM7Au7gDu4IuIM7Au7gjoA7uCPgDu4IuIM7Au7gDu4IuIM7Au7gjsjlP8ZsDtErMUL7AAAAAElFTkSuQmCC')
  &__arrow
    position absolute
    top 28px
    left 50%
    width 14px
    margin-left -7px
    height 9px
    background-repeat no-repeat
    background-size 100%
    background-image url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMy40MzggNy4yOTZhLjk5NS45OTUgMCAwIDEtLjAwMyAxLjQxMWMtLjM5LjM5LTEuMDMuMzg1LTEuNDEuMDAzTDUuNjU2IDIuMzQzIDcuMDcuOTNsNi4zNjcgNi4zNjd6Ii8+PHBhdGggZD0iTTguNDg1IDIuMzQzTDIuMTE4IDguNzFhLjk5NS45OTUgMCAwIDEtMS40MS0uMDAzIDEuMDA0IDEuMDA0IDAgMCAxLS4wMDQtMS40MUw3LjA3LjkyOGwxLjQxNCAxLjQxNHoiLz48L2c+PC9zdmc+')
  &__slot
    flex 1
    padding 5px 0 12px
    background #fff

// iphonex兼容
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)
  .tn-iotLayerControl__slot
    --safe-area-inset-bottom: env(safe-area-inset-bottom)
    padding-bottom calc(9px + var(--safe-area-inset-bottom))