@use "@styles/mixins/bem" as *;
@use "@styles/mixins/function" as *;
@use "@styles/mixins/namespace" as *;

@include b(menu-theme) {
  @include e(item) {
    position: relative;
    width: calc(100% / 3 - 10px);
  }

  @include e(box) {
    height: 55px;
    border-radius: 8px;
    box-shadow: 0 2px 8px 0 cssVar(gray-400);
    transition: box-shadow cssVar(transition-duration-fast);

    &:hover {
      box-shadow: 0 2px 8px 0 cssVar(gray-600);
    }

    img {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }

    @include is(active) {
      box-shadow: 0 0 0 2px cssVar(color-primary) !important;
    }
  }

  @include m(icon) {
    position: absolute;
    top: 30px;
    right: 10px;
    color: cssVar(color-primary);
    transition: all cssVar(transition-duration-fast);
  }

  @include m(name) {
    margin: 10px 0;
    font-size: 14px;
    text-align: center;
  }
}
