@import "../../styles/variables.scss";

$time-select-height: 45px;

:host {
  display: block;
  width: min-content;
  overflow: hidden;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 2px 7px rgba(0, 0, 0, 0.1);
  z-index: z(max);
  .date-time-container {
    position: relative;
    .view-container {
      position: relative;
    }
    ::ng-deep .time-picker {
      position: absolute;
      height: 100%;
      width: 100%;
      background: #fff;
      transform: translateX(100%);
      transition: transform 200ms ease-in-out;
      z-index: z(above);
      top: 0;
      novo-time-picker {
        width: inherit;
        border-radius: 0;
      }
      .increments {
        width: unset;
        novo-list-item {
          width: auto;
        }
      }
    }
    .date-time-tabs {
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      height: 45px;
      & > span {
        color: $positive;
        text-align: center;
        flex: 1;
        cursor: pointer;
        transition: opacity 200ms ease-in-out;
        opacity: 0.6;
        &:hover {
          opacity: 1 !important;
        }
        .meridian {
          text-transform: uppercase;
        }
      }
      .date-time-indicator {
        position: absolute;
        width: 50%;
        height: 2px;
        bottom: 0;
        left: 0;
        background: $positive;
        transition: transform 200ms ease-in-out;
      }
    }
  }
  .calendar {
    box-shadow: none;
    background: transparent;
  }
  .digital {
    height: $time-select-height;
  }
  novo-time-picker {
    box-shadow: none;
    .analog {
      margin: 0;
    }
  }
}