src/wolnelektury/static/2022/styles/components/_lang.scss

   1 .c-lang {
   2   position: absolute;
   3   top: 11px;
   4
   5   width: 150px;
   6   right: 50px + 16px;
   7   z-index: $master-layer + 1;
   8   display: none;
   9
  10   @include rwd($break-menu) {
  11       display: block;
  12   }
  13
  14   &:has(.c-lang__list:popover-open) {
  15     .c-lang__button {
  16       .icon-arrow-down {
  17         transform: rotate(-180deg);
  18       }
  19     }
  20   }
  21 }
  22
  23 .c-lang__button {
  24     border: 0;
  25     background: none;
  26     padding: 0;
  27     font: inherit;
  28   display: flex;
  29   align-items: center;
  30   color: $color-white;
  31   cursor: pointer;
  32
  33   .icon-lang {
  34     color: #92BD39;
  35     @include font-size(26px);
  36     margin-right: 8px;
  37   }
  38
  39   .icon-arrow-down {
  40     margin-left: 8px;
  41     transition: transform 350ms $ease-out;
  42   }
  43 }
  44
  45
  46 .c-lang__list {
  47     --focus-ring: #083F4D;
  48     position-area: bottom span-right;
  49     position: absolute;
  50     inset: auto;
  51     width: 150px;
  52     margin: 10px 0 0 0;
  53     border: 0;
  54   border-radius: 10px;
  55   background-color: #F7BA00;
  56   overflow: hidden;
  57   transform: translateY(-10px);
  58   opacity: 0;
  59   flex-direction: column;
  60   transition: all 350ms $ease-out,
  61               display 350ms allow-discrete,
  62               overlay 350ms allow-discrete;
  63
  64   &:popover-open {
  65       display: flex;
  66       opacity: 1;
  67       transform: none;
  68   }
  69
  70   button {
  71     display: block;
  72     padding: 9px 20px;
  73     color: #474747;
  74     background-color: transparent;
  75     border: 0;
  76     cursor: pointer;
  77     font-family: "Source Sans Pro";
  78     font-size: 16px;
  79     line-height: 18.4px;
  80     text-align: left;
  81
  82     &:hover {
  83       background-color: #EDAA00;
  84     }
  85
  86     &.is-active {
  87       font-weight: $semibold;
  88       background-color: #EDAA00;
  89     }
  90   }
  91 }
  92
  93 @starting-style {
  94   .c-lang__list:popover-open {
  95     opacity: 0;
  96     transform: translateY(-10px);
  97   }
  98 }