@use '@/shared/assets/styles/mixins' as *;
@use '@/shared/assets/styles/variables' as *;
@use '@/shared/assets/styles/shared' as *;

.container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

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

  .name {
    flex: 1 1;
    overflow-wrap: anywhere;
    color: $textColor;
    font-size: toRem(40);
    font-family: 'Kanit';
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .links {
    @include childrenMargin($marginMedium, right);
    white-space: nowrap;
    margin-left: auto;

    .fixWidth {
      min-width: toRem(180);
    }
  }
}

.tabs {
  margin-bottom: 16px;

  display: flex;
  gap: 32px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.07);

  .button {
    padding-bottom: 16px;

    font-family: Kanit;
    font-size: 16px;
    font-weight: 600;
    line-height: 20.8px;
    color: rgba(255, 255, 255, 0.6);

    background-color: transparent;
    transition: color 0.25s, box-shadow 0.25s;

    &.active {
      color: #2bd071;

      box-shadow: 0 2px 0 0 #2bd071;
    }
  }
}

.body {
  display: flex;
  flex-direction: column;
}