@use '@/styles/mixins/viewport-sizes' as vs;
@use '@/styles/mixins/index.scss' as m;

.cfp-button {
  border: 1px solid var(--accent);
  border-radius: var(--common-radius-sm);
  color: var(--fg);
  font-size: var(--fs-lg);

  /**
   * Not sure why, but the vertical alignment looks off in tablet-and-smaller
   * compared to desktop.  Hence the px adjustment here
   */
  @include vs.desktop {
    padding: 8px 16px;
  }
  @include vs.tablet-and-smaller {
    padding: 9px 16px 7px;
  }

  > .content {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: var(--bg);
    padding-left: 8px;
    padding-right: 8px;
    transition: border-bottom-color var(--transition-dur);
  }

  &:not(:disabled) {
    @include m.hover {
      > .content {
        border-bottom-color: var(--fg);
      }
    }
  }

  &.primary {
    background-color: var(--accent);
    color: var(--bg);
    font-weight: bold;

    > .content {
      border-bottom-color: var(--accent);
    }

    &:not(:disabled) {
      @include m.hover {
        > .content {
          border-bottom-color: var(--bg);
        }
      }
    }
  }
}
