// ========================
// SKILLS SECTION SCSS
// ========================

@use '../variables' as *;
@use '../mixins' as *;

.skills {
  padding: var(--section-padding);

  &-grid {
    @include grid-responsive(300px, 32px);
    margin-bottom: 60px;
  }

  .skill-category {
    @include card(32px, $border-radius-large, light);

    .category-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;

      .category-icon {
        @include icon-container(60px, $primary-color, $border-radius);
      }

      .category-title {
        font-size: map-get($font-sizes, lg);
        font-weight: 700;
        color: var(--text-primary);
      }
    }

    .skills-list {
      display: flex;
      flex-direction: column;
      gap: 20px;

      .skill-item {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .skill-header {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .skill-name {
            font-weight: 600;
            color: var(--text-primary);
          }

          .skill-percentage {
            font-size: map-get($font-sizes, sm);
            color: var(--text-secondary);
          }
        }

        .skill-bar {
          @include progress-bar(8px);

          .skill-progress {
            height: 100%;
            border-radius: 4px;
            @include transition(width, $transition-slow);
          }
        }
      }
    }
  }

  .soft-skills {
    text-align: center;

    &-title {
      font-size: map-get($font-sizes, xl);
      font-weight: 700;
      margin-bottom: 32px;
      color: var(--text-primary);
    }

    &-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;

      .soft-skill-tag {
        @include tag(12px 20px, var(--bg-primary), var(--text-secondary));
        display: flex;
        align-items: center;
        gap: 8px;
        border: 2px solid var(--border-color);
        border-radius: 50px;
        font-weight: 500;
        cursor: default;

        &:hover {
          border-color: $primary-color;
          color: $primary-color;
          transform: translateY(-2px);
        }
      }
    }
  }
}