"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Stop = exports.StopContainer = exports.PatternContainer = exports.LogoLinkContainer = exports.RouteNameContainer = exports.Container = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/** Route Details */
const Container = _styledComponents.default.div`
  overflow-y: hidden;
  height: 100%;
  background-color: ${props => props.full ? '#ddd' : 'inherit'}
`;
exports.Container = Container;
const RouteNameContainer = _styledComponents.default.div`
  padding: 8px;
  background-color: inherit;
`;
exports.RouteNameContainer = RouteNameContainer;
const LogoLinkContainer = _styledComponents.default.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
`;
exports.LogoLinkContainer = LogoLinkContainer;
const PatternContainer = _styledComponents.default.div`
  background-color: inherit;
  color: inherit;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 16px;
  padding: 0 8px 8px;
  margin: 0;

  overflow-x: scroll;

  h4 {
      margin-bottom: 0px;
      white-space: nowrap;
  }
}
`;
exports.PatternContainer = PatternContainer;
const StopContainer = _styledComponents.default.div`
  color: #333;
  background-color: #fff;
  overflow-y: scroll;
  height: 100%;
  /* 100px bottom padding is needed to ensure all stops 
  are shown when browsers don't calculate 100% sensibly */
  padding: 15px 0 100px;
`;
exports.StopContainer = StopContainer;
const Stop = _styledComponents.default.a`
  cursor: pointer;
  color: #333;
  display: block;
  white-space: nowrap;
  margin-left: 45px;
  /* negative margin accounts for the height of the stop blob */
  margin-top: -25px;

  &:hover {
    color: #23527c;
  }

  /* this is the station blob */
  &::before {
    content: '';
    display: block;
    height: 20px;
    width: 20px;
    border: 5px solid ${props => props.routeColor};
    background: #fff;
    position: relative;
    top: 20px;
    left: -35px;
    border-radius: 20px;
  }

  /* this is the line between the blobs */
  &::after {
    content: '';
    display: block;
    height: 20px;
    width: 10px;
    background: ${props => props.routeColor};
    position: relative;
    left: -30px;
    /* this is 2px into the blob (to make it look attached) + 30px so that each
    stop's bar connects the previous bar with the current one */
    top: -37px;
  }

  /* hide the first line between blobs */
  &:first-of-type::after {
    background: transparent;
  }
`;
exports.Stop = Stop;

//# sourceMappingURL=styled.js