@use 'sass:map';

@use '../mixins/mixins.scss' as *;
@use '../var/size.scss' as *;

$footer-sizes: () !default;
$footer-sizes: map-merge(
  (
    'sm': 24rpx,
    '': 28rpx,
    'lg': 32rpx,
    'xl': 36rpx,
  ),
  $footer-sizes
);

@include b(footer) {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  font-size: map-get($footer-sizes, '');

  /* 导航 start */
  @include e(navigators) {
    display: flex;
    align-items: center;

    padding-bottom: 10rpx;
  }
  @include e(navigator) {
    position: relative;
    & + & {
      padding-left: 30rpx;

      &::before {
        content: '';
        position: absolute;
        left: 15rpx;
        top: 50%;
        width: 1rpx;
        height: 60%;
        background-color: var(--tn-color-gray-disabled);
        transform: translate(0, -50%);
      }
    }
  }
  /* 导航 end */

  /* 固定方式 start */
  @include e(fixed) {
    left: 0;
    bottom: 0;
    @include m(container) {
      position: absolute;
    }
    @include m(page) {
      position: fixed;
    }
  }
  /* 固定方式 end */

  /* 尺寸 start */
  @each $size in $tn-inner-sizes {
    @include m($size) {
      font-size: map-get($footer-sizes, $size);
    }
  }
  /* 尺寸 end */
}