@use "../base" as *;
@use "../abstracts" as *;

.field--name-field-button-3 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 10px 24px;
  @include breakpoint(medium) {
    flex-direction: row;
  }
  .field__item {
    width: 100%;
    a {
      display: flex;
      padding: 12px 16px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      border-radius: 4px;
      background: $light-gray;
      color: $dark-gray;
      font-weight: 500;
    }
    &.active {
      a {
        &::before {
          content: url("/themes/custom/gto/assets/icons/check-circle-green.svg");
        }
        background: white;
        border-radius: 4px;
        border: 1px solid $brand-green;
      }
    }
  }
}

.page-node-type-trough {
  .field--name-field-button-3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 10px 20px;

    @include breakpoint(medium) {
      margin: 0 0 28px;
    }

    .field__item {
      min-width: 0;

      a {
        min-height: 46px;
        padding: 10px 14px;
        border: 1px solid transparent;
        background: $light-gray;
        font-size: 0.9375rem;
        line-height: 1.25rem;
        transition:
          background-color 0.2s,
          border-color 0.2s,
          color 0.2s;
      }

      &.active {
        a {
          border-color: $brand-green;
          color: $dark-gray;
          background: white;
          box-shadow: none;
        }
      }
    }
  }
}