@prefix: simple-tabs;

.@{prefix} {
  &- {
    &root {
      position: relative;
      //height: 25px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #CCCCCC;
    }

    &tab {
      position: relative;
      user-select: none;
      padding: 4px 20px;
      cursor: pointer;
      text-align: center;

      &:after {
        position: absolute;
        content: ' ';
        bottom: 0;
        left: 50%;
        height: 2px;
        width: 0%;
        background-color: #1199ff;
        transform: translateX(-50%);
        transition: width 300ms;
      }

      &:hover {
        color: #1199ff;
      }

      &.@{prefix}-checked {
        color: #1199ff;

        &:after {
          width: 90%;
        }
      }
    }


  }
}