// Name:            Tab
// Description:     Tab of website
//
// Component:       `c-tab`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.themes`
//                  `settings/v7/colors.light`
//                  `settings/v7/colors.dark`
//
// ========================================================================

// Variables
// ========================================================================

.c-tab {

  &__item {
    flex-grow: 1;
    order: 1;
    border-top: 4px solid var(--divider-color);
    border-right: 1px solid var(--divider-color);
    border-bottom: 1px solid var(--divider-color);
    background-color: var(--background-color);  
    
    &:first-child {
      border-left: 1px solid var(--divider-color);
    }

    &.is-active,
    &:hover,
    &:active {
      border-top: 4px solid var(--theme-color);
      background-color: var(--background-color-gray);
      transition: background-color .3s ease-in-out, border-top .3s ease-in-out;
      border-bottom: none;
    }

    &.active {
      border-top: 4px solid var(--theme-color);
      border-bottom: none;
    }
  }

  &__container {
    border-top-width: 0;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-right-width: 1px;
    border-style: solid;
    border-color: var(--divider-color);
    
  }
  
  &__content {
    display: none;
    &:first-of-type:not(:has(~input:checked)) {
      display: block;
    } 
    &.c-tab--edged {
      border-top-width: 0;
      border-left-width: 1px;
      border-bottom-width: 1px;
      border-right-width: 1px;
      border-style: solid;
      border-color: var(--divider-color);
    }
  
  }  

  input:checked {	
		+ .c-tab__content {
			display: block;
			height: auto;
		}
	}
   
}