/* ***
//  Stylesheet m-rpivate-menu
//
//  Table of Contents:
//  1. Estructura principal
//  2. Items de menú
//  3. Modificadores (abierto / seleccionado)
//  4. iconos
//  5. Cerrar sesión
//  6. Menú móvil
//
// *** */





/* 1. Estructura principal
// --- */
.m-private-menu {
  background-color: var(--background-color);
}

.m-private-menu__block {}

.m-private-menu__item:not(:nth-last-child(-n+2)) {
  border-block-end: calc(1 / var(--font-default) * 1rem) solid var(--color-grey-light);
}

.m-private-submenu__item {
  border-block-start: calc(1 / var(--font-default) * 1rem) solid var(--color-grey-light);
}

.m-private-submenu__item {}

.m-private-menu__trigger {
  display: block;
  width: 100%;
}





/* 2. Items de menú
// --- */
.m-menu-item,
.m-submenu-item {
  display: block;
  color: var(--color-grey-very-dark);
  font-size: calc(14 / var(--font-default) * 1rem);
  line-height: calc(16 / var(--font-default) * 1rem);
  letter-spacing: calc(.42 / var(--font-default) * 1rem);
  text-transform: uppercase;
  padding: calc(15 / var(--font-default) * 1rem) calc(40 / var(--font-default) * 1rem) calc(13 / var(--font-default) * 1rem);
}

/* --bp-below-tablet-hor -> 1023px -> 63.9375em */
@media screen and (max-width: 63.9375em) {
  .m-menu-item,
  .m-submenu-item {
    padding-inline-start: calc(48 / var(--font-default) * 1rem);
  }
}

.m-private-menu__item--foldable .m-menu-item {
  position: relative;
  padding-inline-end: calc(72 / var(--font-default) * 1rem);
}

@media screen and (max-width: 63.9375em) {
  .m-private-menu__item--foldable .m-menu-item {
    padding-inline-end: calc(56 / var(--font-default) * 1rem);
  }
}

.m-private-menu__item--foldable .m-menu-item::before,
.m-private-menu__item--foldable .m-menu-item::after {
  content: '';
  background-color: var(--color-grey-light);
  width: calc(1 / var(--font-default) * 1rem);
  height: calc(12 / var(--font-default) * 1rem);
  position: absolute;
  inset-inline-end: calc(72 / var(--font-default) * 1rem);
  inset-block-start: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width: 63.9375em) {
  .m-private-menu__item--foldable .m-menu-item::before {
    inset-inline-end: calc(56 / var(--font-default) * 1rem);
  }
}

.m-private-menu__item--foldable .m-menu-item::after {
  width: calc(24 / var(--font-default) * 1rem);
  height: calc(24 / var(--font-default) * 1rem);
  inset-inline-end: calc(24 / var(--font-default) * 1rem);
  background: url('/img/icons/icon-plus-blue.svg') center no-repeat;
}

@media screen and (max-width: 63.9375em) {
  .m-private-menu__item--foldable .m-menu-item::after {
    inset-inline-end: calc(16 / var(--font-default) * 1rem);
  }
}

.m-private-menu__item--foldable.is-open .m-menu-item::after {
  background-image: url('/img/icons/icon-minus-blue.svg');
}

.m-menu-item__title {
  position: relative;
}

.m-menu-item__title .badge {
  background-color: var(--color-orange);
  font-size: calc(10 / var(--font-default) * 1rem);
  color: var(--color-white);
  border-radius: calc(3 / var(--font-default) * 1rem);
  padding: calc(2 / var(--font-default) * 1rem) calc(4 / var(--font-default) * 1rem);
  margin-inline-start: calc(4 / var(--font-default) * 1rem);
}

.m-menu-item__title::before {
  content: '';
  width: calc(24 / var(--font-default) * 1rem);
  height: calc(24 / var(--font-default) * 1rem);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: calc(24 / var(--font-default) * 1rem) auto;
  position: absolute;
  inset-inline-start: calc(-40 / var(--font-default) * 1rem);
  inset-block-start: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width: 63.9375em) {
  .m-menu-item__title::before {
    inset-inline-start: calc(-32 / var(--font-default) * 1rem);
  }
}

.m-menu-item--inactive .m-menu-item__title {
  opacity: .35;
}

.m-private-menu__item--selected .m-menu-item__title::before,
.m-private-menu__item--open .m-menu-item__title::before {
  background-position: center bottom;
}

.m-submenu-item {
  background-color: var(--color-grey-very-light);
}
.m-submenu-item__title {}





/* 3. Modificadores (abierto / seleccionado)
// --- */
.m-private-menu__item--open .m-menu-item__title {
  color: var(--color-orange);
}

.m-private-menu__item--selected .m-menu-item__title,
.m-private-submenu__item--selected .m-menu-item__title,
.m-private-menu__item--selected .m-submenu-item__title,
.m-private-submenu__item--selected .m-submenu-item__title {
  color: var(--color-orange);
  font-weight: var(--font-weight-normal);
}





/* 4. iconos
// --- */
.m-private-menu__item--miLinea .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-movil-2-colors.svg');
}

.m-private-menu__item--cambiarTarifaBonos .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-cambio-2-colors.svg');
}

.m-private-menu__item--comprarLineaYOFibra .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-anadir-circulo-2-colors.svg');
}

.m-private-menu__item--anadirBonosExtra .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-bonos-2-colors.svg');
}

.m-private-menu__item--promotionalBundle .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-new2-2-colors.svg');
}

.m-private-menu__item--compartirGigas .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-compartir-2-colors.svg');
}

.m-private-menu__item--tiendaDeMoviles .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-tienda-2-colors.svg');
}

.m-private-menu__item--limitesYAvisos .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-avisos-y-limites-2-colors.svg');
}

.m-private-menu__item--recargas .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-recargas-2-colors.svg');
}

.m-private-menu__item--miFactura .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-factura-2-colors.svg');
}

.m-private-menu__item--misConsumos .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-consumo-2-colors.svg');
}

.m-private-menu__item--invitaAUnAmigo .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-mgm-2-colors.svg');
}

.m-private-menu__item--roaming .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-roaming-2-colors.svg');
}

.m-private-menu__item--preguntasFrecuentes .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-preguntas-2-colors.svg');
}

.m-private-menu__item--miContestador .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-contestador-2-colors.svg');
}

.m-private-menu__item--miAgenda .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-agendamovil-2-colors.svg');
}

.m-private-menu__item--misGestiones .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-gestiones-2-colors.svg');
}

.m-private-menu__item--miCuenta .m-menu-item__title::before {
  background-image: url('/simyo/img/base/icons/menu/icon-mi-cuenta-2-colors.svg');
}





/* 5. Cerrar sesión
// --- */
.m-private-menu__item--cerrarSesion .c-button {
  padding: calc(8 / var(--font-default) * 1rem) calc(40 / var(--font-default) * 1rem);
  border-radius: calc(8 / var(--font-default) * 1rem);
  background-color: var(--color-grey-light);
  border-color: var(--color-grey-light);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(16 / var(--font-default) * 1rem);
  width: 100%;
  font-weight: var(--font-weight-light);
}

.m-private-menu__item--cerrarSesion .c-button::before {
  content: '';
  display: block;
  width: calc(24 / var(--font-default) * 1rem);
  height: calc(24 / var(--font-default) * 1rem);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: calc(24 / var(--font-default) * 1rem) auto;
  background-image: url('/simyo/img/base/icons/menu/icon-menu-desconectar-2-colors.svg');
}

.m-private-menu__item--cerrarSesion .c-button:hover::before {
  background-position: center bottom;
}

.m-private-menu__item--cerrarSesion .c-button::after {
  content: unset;
}





/* 6. Menú móvil
// --- */
/* --bp-below-tablet-hor -> 1023px -> 63.9375em */
@media screen and (max-width: 63.9375em) {

  .m-private-menu {

  }
  .m-private-menu__container {


  }





  .m-private-menu {
    position: fixed;
    inset-inline-end: 0;
    inset-block-start: calc(72/var(--font-default) * 1rem);
    /* TODO: revisar este z-index, igual tiene que ser mayor */
    z-index: 3;
    background-color: rgba(0, 0, 0, 0);
    inline-size: 0;
    transition: inline-size ease .2s, background-color ease .2s .3s;
  }

  .m-private-menu__container {
    /* A 270 en lugar de a 255 porque caben mejor los elementos y hasta 320 hay espacio */
    width: calc(270/var(--font-default) * 1rem);
    margin-inline-start: auto;
    background-color: var(--color-white);
    height: calc(100vh - calc(72/var(--font-default) * 1rem));
    height: calc(100dvh - calc(72/var(--font-default) * 1rem));
    transform: translateX(100%);
    overflow: hidden;
    transition: transform ease .3s .3s;
  }

  .m-private-menu--open {
    inline-size: 100vw;
    background-color: rgba(0,0,0, .28);
  }

  .m-private-menu--open .m-private-menu__container {
    transform: translateX(0);
    overflow-y: auto;
  }

  .m-menu-item,
  .m-submenu-item {
    padding-inline-end: calc(10/var(--font-default) * 1rem);
  }

  .m-private-menu__item--cerrarSesion .c-button {
    padding-inline-start: calc(15/var(--font-default) * 1rem);
    justify-content: flex-start;
    gap: calc(8/var(--font-default) * 1rem);
  }
}

/* --bp-below-tablet -> 767px -> 47.9375em */
@media screen and (max-width: 47.9375em) {
  .m-private-menu {
    inset-block-start: calc(74/var(--font-default) * 1rem);
  }

  .m-private-menu__container  {
    height: calc(100vh - calc(72/var(--font-default) * 1rem));
    height: calc(100dvh - calc(72/var(--font-default) * 1rem));
  }
}





@media screen and (max-width: 63.9375em) {

}