@import 'partials/_variables.scss';

form {
  width: 100%;

  .select {
    width: 100%;
  }

  select {
    width: 100%;
  }

  .main-cta {
    width: 100%;
  }
}

.wrapper-names {
  display: flex;

  .field:first-child {
    margin-right: 0.5em;
  }

  .field {
    width: 50%;
  }
}

.t-baseline {
  height: 1px;
  background-color: #e2e2e2;
  max-width: unset;
  width: 100%;
  margin-top: 2em;
  margin-bottom: 2em;
}

.rating-wrapper {
  margin-top: 3em;
  margin-bottom: 3em;
}

.rating-stars {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 35px;

  .star-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    transition: transform 0.1s ease;

    &:hover {
      transform: scale(1.1);
    }

    svg.active {
      width: 36px;
      height: 36px;
      fill: hsl(0, 0%, 48%) ;
      transition: fill 0.2s ease;

      path {
        fill: hsl(0, 0%, 48%) ;
      }
    }

    &.active svg,
    &:hover svg {
      fill: #f1b60d;

      path {
        fill: #f1b60d;
      }
    }
  }
}