/* @masthead-country-widget */

.masthead-country-widget {
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);

  h2 {
    @include poly-margin-y--small;
    margin-left: 10px;
    color: white !important;
  }


  @media screen and (max-width: 769px) {
    width: 100%;
    display: flex;
    justify-content: space-between;

    > span {        
        line-height: 40px;
        font-weight: 900;

        @include themify($themes) {
            font-family: themed('headingFont');
            font-size: themed('ctaFontSize');
        }
    }
  }

  @media screen and (min-width: 770px) {
      h2 {
          display: block !important;
      }
  }

  .widget-trigger {
    padding-left: 40px;
  }

  &.country-open {
      .widget-trigger {
        @include themify($themes) {
          background-color: themed('ctaColor');
        }

          .widget-arrow-icon {
              transform: rotate(180deg);
              transform-origin: center center;
          }
      }

      .masthead-country-widget__inner {
          transform: scale(1);
          opacity: 1;
          // display: block;

          .widget-arrow-icon {
              transform: rotate(180deg);
              display: block;

              &:hover {
                  @include themify($themes) {
                      color: darken(themed('ctaColor'), 20%);
                  }
              }
          }

          ul li a {
              color: white;
          }
      }
  }
}

.masthead-country-widget__inner {
  position: absolute;
  z-index: 399;
  top: 40px;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  // display: none;
  left: 0;
  right: 0;

  

  @include themify($themes) {
    background-color: themed('ctaColor');
  }

  @media screen and (min-width: 770px) {
      transform: scale(0);
      opacity: 0;
      transform-origin: top left;
      @include poly-padding--large;
  }

  .widget-arrow-icon {
      display: block;
      transform: rotate(0deg);
  }

  .masthead-country-widget__inner-er {
      position: relative;
      @include poly-padding-x--large;

      @media screen and (max-width: 769px) {
        @include poly-padding-y--large;
        @include poly-padding-x;
        @include poly-margin-top;
    }

      .current-site {
        padding: 3px 30px 0 10px;
        line-height: 41px;
        display: block;
        font-size: 12px;
        font-weight: 600;
        font-family: "Biryani", sans-serif;
        position: absolute;
        left: 0;
        top: 0;
        background-image: $tick-blue;
        background-position: 95% center;
        background-repeat: no-repeat;
        background-size: 20px;
    
        background-color: white;
        border-radius: $border-radius-square;


        @media screen and (min-width: 770px) {
            padding: 3px 40px 0 10px;
            background-position: 91% center;
        }
        
        @include themify($themes) {
            color: themed('ctaColor');
        }
    
      }

      &.col-2 ul {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
      }
  }


  ul {
      display: flex;
      flex-flow: column wrap;
      height: 230px;
      align-content: flex-start;
      overflow:hidden;
      list-style: none;
      padding: 0;
      margin: 0;
      position: relative;

      @media screen and (max-width: 769px) {
          padding: 0 3rem;
          height: 100%;
      }

      li {
            position: relative;
            width: calc(100% / 5);
            border: 0 solid transparent;
            border-width: 0 20px 10px 0;

            @media screen and (max-width: 769px)  {
                margin-bottom: 1em;
                width: 50%;
                border-width: 0 30px 10px 0;
            }

          a {
              color: white;
              padding: 3px 40px 0 10px;
              line-height: 41px;
              display: inline-block;
              font-size: 12px;
              font-weight: 200;
              font-family: "Biryani", sans-serif;

              &:hover{
                  background-color: white;
                  border-radius: $border-radius-square;
                  
                  @include themify($themes) {
                      color: themed('ctaColor');
                  }
              }

              @media screen and (max-width: 769px) {
                padding: 0;
                display: block;
                line-height: 2;
            }
          }
      }
  }
}