raf-select-bar {
  $nipple-size: 30px;
  ion-grid {
    position: relative;
    max-width: 800px;
    span.nipple {
      position: absolute;
      left: 0;
      bottom: -32px;
      width: 0;
      height: 0;
      content: '';
      border-style: solid;
      border-width: 0 $nipple-size $nipple-size $nipple-size;
      border-color: transparent transparent var(--theme-primary) transparent;
      transition: left ease-in-out 0.3s;
    }
  }
  ion-row {
    flex-wrap: nowrap;
    width: 100%;
  }
  ion-icon {
    display: block;
    padding: 10%;
    margin: 0 auto;
    border-radius: 50%;
    border: 1px solid var(--theme-primary);
    transition: all ease 0.3s;
    max-height: 55px;
    max-width: 55px;
    font-size: 36px;
    color: var(--theme-primary);

    &:hover {
      cursor: pointer;
      background: var(--theme-primary);
      color: white;
    }
  }
  .is-active {
    ion-icon {
      background: var(--theme-green);
      border-color: var(--theme-green);
      color: white;
    }
  }
}