@use 'apps/dashboard/src/variables' as *;

.header {
  margin-bottom: rhythm(5);
  width: rhythm(90);
}

h2 {
  margin-bottom: rhythm(1);
}

.currency {
  background-color: transparent;
  border: 1px solid $color-neutral-regular;
  cursor: pointer;
  padding: 0 rhythm(1.5);
  margin-top: rhythm(2);
  &:first-child {
    border-radius: rhythm(0.5) 0 0 rhythm(0.5);
    border-right: 0;
  }
  &:last-child {
    border-radius: 0 rhythm(0.5) rhythm(0.5) 0;
  }
  &.selected {
    background-color: $color-neutral-regular;
    color: $color-light-stronger;
  }
}

.subscriptions {
  white-space: nowrap;

  &.v3starter th:nth-child(2),
  &.v3starter td:nth-child(2),
  &.v3pro th:nth-child(3),
  &.v3pro td:nth-child(3),
  &.v3enterprise th:nth-child(4),
  &.v3enterprise td:nth-child(4) {
    background-color: $color-light-stronger;
  }

  tr {
    border-bottom: 1px solid $color-neutral-lighter;
    &:first-child {
      border-bottom: 0;
    }
  }

  th {
    padding: rhythm(2);
  }

  td {
    padding: rhythm(1.5) rhythm(2);
    vertical-align: center;
    &:first-child {
      font-weight: $font-weight-semi-bold;
    }
  }

  pa-icon[name='check'] {
    color: $color-primary-regular;
  }

  .plan {
    vertical-align: top;
    width: rhythm(24);
  }

  .plan-name {
    font-size: $font-size-title-l;
    margin-bottom: rhythm(1);
  }

  .price {
    color: $color-primary-regular;
    display: flex;
    gap: rhythm(1);
    font-size: $font-size-title-l;
    margin-bottom: rhythm(2);
  }

  .unit {
    color: $color-neutral-regular;
    font-size: $font-size-body-s;
    font-weight: $font-weight-regular;
  }

  .subscribed {
    align-items: center;
    background-color: $color-primary-lighter;
    display: flex;
    gap: rhythm(0.5);
    justify-content: center;
    margin: 0 -#{rhythm(2)};
    padding: rhythm(1) 0;
  }
}

.notes {
  color: $color-neutral-regular;
  margin-top: rhythm(3);
}
