import styled from "styled-components";
import { fonts } from "../../styles/fonts";
import { primary, gray } from "../../core/colors/colors";

export const TabButtonContainer = styled.div`
  display: flex;

  .selected {
    color: #fff;
    background-color: ${primary[500]};
  }

  .selected:disabled {
    background-color: ${gray[100]};
  }
`;

export const TabButtonStyle = styled.button`
  height: 48px;

  padding: 0 24px;

  border: 1px solid ${primary[500]};

  display: flex;
  align-items: center;
  justify-content: center;

  color: ${primary[500]};
  background-color: #fff;

  cursor: pointer;

  ${fonts.button}

  &:first-child {
    border-radius: 40px 0 0 40px;
  }

  &:last-child {
    border-radius: 0 40px 40px 0;
  }

  &:not(:last-child) {
    border-right: 0;
  }

  &:disabled {
    border-color: ${gray[400]};

    color: ${gray[400]};
    background-color: #fff;

    cursor: inherit;
  }
`;
