@use "sass:map";
@use "sass:math";
@use "@twig/scss/_global" as global;
@use "@twig/scss/variables/_variables-components" as components;

$params: (
   "logout-color" : global.$red,
   "logout-icon-margin" : 10px,
   "logout-icon-y-offset" : 2px,
   "logout-icon-x-offset" : 11px,
   "logout-icon-size" : 18px,

   "item-padding" : 16px 12px,
   "item-bg" : global.$body-bg,
   "item-bg-active" : global.$body-bg-alt,
   "border-radius" : global.$border-radius-base,

   "icon-size" : 16px,
   "icon-color" : global.$text-dark,
   "icon-x-offset" : 12px,
);

@if global-variable-exists(c-account-menu, components) {
   $keys: map.keys(components.$c-account-menu);
   @each $name in $keys {
      @if not map.get($params, $name) {
         @warn "Neexistující proměnná '#{$name}' v komponentě '$#{component("Account:Menu", "class")}'.";
      }
   }

   $params: map.merge($params, components.$c-account-menu);
}

.#{component("Account:Menu", "class")} {
   ul {
      list-style: none;
      padding-left: 0;
      margin-bottom: 0;
   }

   a {
      display: block;
      position: relative;
      text-decoration: none;
      padding: map.get($params, "item-padding");
      background-color: map.get($params, "item-bg");
      border-radius: map.get($params, "border-radius");
      transition: background-color global.$transition-speed;

      &.active,
      &:hover,
      &:focus {
         background-color: map.get($params, "item-bg-active");
      }
   }

   .c-icon {
      font-size: map.get($params, "icon-size");
      color: map.get($params, "icon-color");
   }

   .item-logout {

      .c-icon {
         color: map.get($params, "logout-color");
         font-size: map.get($params, "logout-icon-size");

         &:not(.arrow-icon) {
            position: relative;
            top: map.get($params, "logout-icon-y-offset");
            margin-right: map.get($params, "logout-icon-margin");
         }

         &.arrow-icon {
            right: map.get($params, "logout-icon-x-offset");
         }
      }
   }

   .arrow-icon {
      position: absolute;
      right: map.get($params, "icon-x-offset");
      top: 50%;
      transform: translateY(-50%);
   }
}
