@idm-tabs__weight-bold : @font_bold;
@idm-tabs__weight-normal : @font_normal;
@idm-tabs__primary-green: @primary_green;
@idm-tabs__primary-black: @primary_black;
@idm-tabs__secondary-green: #3EB975;
@idm-tabs__primary-orange: @primary_orange;
@idm-tabs__secondary-gray: @primary_grey;
@idm-tabs__mobile-h2: @headline_font;
@idm-tabs__mobile-body-large: 1.8rem;
@idm-tabs__mobile-body-medium: @body_m_font;
@idm-tabs__mobile-body-small: @body_s_font;
@idm-tabs__lineheight-l: @line_height;
@idm-tabs__lineheight-m: 120%;
@idm-tabs__modal-max-width: 1179px;
@idm-tabs__modal-max-height: 867px;

@idm-tabs__secondary-white: @primary_white;

@idm-tabs__secondary-background-gray: @second_bg;
@idm-tabs__secondary-outline-gray: @primary_secondary_grey;

.idm-tabs{
  
  &__cache-container{
    display: none;
    & * {
      display: none;
    }
  }

  &-modal{
    z-index: 99999999;
    .modal__wrapper{
      width: 100vw !important;
      height: 100% !important;
      max-width: @idm-tabs__modal-max-width !important;
      max-height: @idm-tabs__modal-max-height !important;
      margin: 0 !important;
      border-radius: 0 !important;
      padding:0 !important;
      background-color: transparent !important;
    
      .modal__content{
        height: 100%;
      }
      & > .modal__close, .modal__close::before{
        display: none !important;
      }  
    }
  
  
    &__wrapper{
      position: relative;
      background-color: @idm-tabs__secondary-white;
      padding: 2.4rem 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    
      @media @desktop{
        border-radius: 8px;
      }
    
    }
    
    &__heading{
      margin-bottom: 1.6rem;
      
      @media @laptop{
        margin-bottom: 2.4rem;
      }
    }
  
    &__title-wrapper{
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 2.4rem;
      padding: 0 2.4rem;
    }
    
    &__title{
      color: @idm-tabs__primary-black !important;
      font-size: @idm-tabs__mobile-h2 !important;
      font-weight: @idm-tabs__weight-bold !important;
      line-height: @idm-tabs__lineheight-m !important;
    } 
    
    &__close-button{
      position: relative;
      width: 4.2rem;
      height: 4.2rem;
      min-width: 4.2rem;
      background-color: @idm-tabs__secondary-background-gray;
      border-radius: 10rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    &__buttons{
      margin-top: 2.4rem;
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE 10+ */
    
      @media @laptop{
        padding: 0 2.4rem;
      }
    
      &::-webkit-scrollbar {
        display: none;
      }
    }
    
    &__button{
      padding: 0 1.2rem 1.2rem 1.2rem;
      font-size: @idm-tabs__mobile-body-large;
      line-height: 130%;
      font-weight: @idm-tabs__weight-normal;
      white-space: nowrap;
      border-bottom: 2px solid @idm-tabs__secondary-outline-gray;
    
      @media @laptop{
        padding: 0 2rem 2rem 2rem;
      }
      
      &--active{
        border-bottom: 2px solid @idm-tabs__primary-black;
      }
    }
    
    
    &__content{
      position: relative;
      flex: 1;
      overflow-y: auto;
      padding:0 2.4rem;
    }
  
    &__tab{
      position: relative;
      display: none;
      height: 100%;
      width: 100%;
    
      &--active{
        display: block;
      }
    }
  }
}