@roadtrip/css/styles/components/_button-carousel.css

CSS framework for Roadtrip Design System

/*
 * Buttons
 *
 * Use custom button styles for actions in forms, dialogs, and more
 * with support for multiple sizes, states, and more.
 *
 * Index
 * - Button
 * - Plain buttons
 * - Outline buttons
 * - Disabled buttons
 * - Button sizes
 *
 */


/* BUTTON CAROUSEL
 -------------------- */

.btn-carousel {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: inherit;
  text-decoration: none;
  text-indent: inherit;
  text-overflow: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  white-space: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border: 1px solid transparent;
  max-width: 3rem;
  height: 3rem;
  border-radius: 2rem;
}

.btn-carousel:not(:disabled) {
  cursor: pointer;
}

.btn-carousel-icon {
  width: 2rem;
  fill: currentColor;
}

/**
 * Fix states
 */

.btn-carousel:hover {
  text-decoration: none;
}

/* OUTLINE
 -------------------- */

 .btn-carousel-outline {
  background: transparent;
  color: var(--road-on-overlay-inverse);
  border-color: var(--road-overlay);
}
 
.btn-carousel-outline:disabled {
  border-color: var(--road-surface-disabled);
  background: var(--road-surface-disabled);
  color: var(--road-on-surface-disabled);
}

.btn-carousel-outline:not([disabled]):hover,
.btn-carousel-outline:not([disabled]).focus-visible {
  border-color: var(--road-outline);
  background: var(--road-surface);
}

/* DEFAULT
 -------------------- */

.btn-carousel-default {
  background: var(--road-overlay);
  color: var(--road-on-overlay);
  border-color: var(--road-overlay-inverse);
}

.btn-carousel-default:disabled {
  background: var(--road-surface-disabled);
  color: var(--road-on-surface-disabled);
}

.btn-carousel-default:not([disabled]):hover,
.btn-carousel-default:not([disabled]).focus-visible {
  color: var(--road-on-surface);
  border-color: transparent;
  background: var(--road-surface);
}