/* -*- mode: css; css-indent-offset: 2; -*- */
/*
 * Copyright 2020 MIT, All Rights Reserved.
 * Released under the Apache License, Version 2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 */

@font-face {
  font-family: iOSFont;
  src: url('../fonts/Helvetica.ttf');
}

.ode-SimpleMockFormIOSLandscape .ode-SimpleMockForm,
.ode-SimpleMockFormIOSPortrait .ode-SimpleMockForm {
  border-radius: 30px;
}

.ode-SimpleMockFormIOSLandscape .ode-SimpleMockForm,
.ode-SimpleMockFormIOSLandscapeTablet .ode-SimpleMockForm,
.ode-SimpleMockFormIOSLandscapeMonitor .ode-SimpleMockForm {
  -webkit-flex-direction: row;
  flex-direction: row;
}

.ode-SimpleMockFormIOSPortrait .ode-SimpleMockForm,
.ode-SimpleMockFormIOSPortraitTablet .ode-SimpleMockForm,
.ode-SimpleMockFormIOSPortraitMonitor .ode-SimpleMockForm {
  -webkit-flex-direction: column;
  flex-direction: column;
}

/* ==== start: skins for iOS : these are temporary mocks of iPhones and iPads */
.ode-SimpleMockFormIOSLandscape {
  background: url(../images/iPhoneXLandscape.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 100% 100%;
  padding: 22px 20px 22px 19px;
}

.ode-SimpleMockFormIOSPortrait {
  background: url(../images/iPhoneXPotrait.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 100% 100%;
  padding: 21px 24px 20px 24px;
}

.ode-SimpleMockFormIOSLandscapeTablet {
  background: url(../images/iOSLandscapeTablet.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 100% 100%;
  padding: 15px 80px 12px 64px;
}

.ode-SimpleMockFormIOSPortraitTablet {
  background: url(../images/iOSPortraitTablet.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 100% 100%;
  padding: 64px 13px 75px 13px;
}

.ode-SimpleMockFormIOSLandscapeMonitor {
  background: url(../images/iOSLandscapeMonitor.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 100% 100%;
  padding: 44px 100px 39px 48px;
}

.ode-SimpleMockFormIOSPortraitMonitor {
  background: url(../images/iOSPortraitMonitor.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 100% 100%;
  padding: 99px 36px 100px 34px;
}

/* iPhoneX notch */
.ode-SimpleMockFormNotch {
  display: none;
  position: absolute;
  background-color: #000000;
}

.ode-SimpleMockFormIOSPortrait .ode-SimpleMockFormNotch {
  height: 30px;
  width : 200px;
  margin: 0 70px;
  border-radius: 0 0 16px 16px;
  display: block;
  top: 22px;
}

.ode-SimpleMockFormIOSLandscape .ode-SimpleMockFormNotch {
  height: 200px;
  width : 30px;
  margin: 92px 0;
  border-radius: 0 16px 16px 0;
  display: block;
  top: 0;
}

/* iOS PhoneBar */
.ode-SimpleMockFormPhoneBariOS-iPhone,
.ode-SimpleMockFormPhoneBariOS-iPad {
  position: relative;
}

.ode-SimpleMockFormLeft {
  left: 15px;
  padding: 10px;
  position: absolute;
  display: none;
}

.ode-SimpleMockFormLeftIPad {
  left: 0;
  padding: 2px 2px 2px 10px;
  position: absolute;
  display: none;
}

.ode-SimpleMockFormRight {
  right: 0;
  padding: 10px;
  position: absolute;
  display: none;
}

.ode-SimpleMockFormRightIPad {
  right: 0;
   padding: 2px 4px 3px 2px;
  position: absolute;
  display: none;
}

.ode-SimpleMockFormPhoneBariOS-iPhone  .ode-SimpleMockFormLeft,
.ode-SimpleMockFormPhoneBariOS-iPhone  .ode-SimpleMockFormRight,
.ode-SimpleMockFormPhoneBariOS-iPad  .ode-SimpleMockFormLeftIPad,
.ode-SimpleMockFormPhoneBariOS-iPad  .ode-SimpleMockFormRightIPad {
  display: inline-block;
}

/* iOS TitleBar */
.ode-SimpleMockFormTitleBar-NavBar {
  background-color: #a5cf47;
  color: white;
  font-size: 22px;
  position: relative;
}

.ode-SimpleMockFormTitleBar-NavBar .ode-SimpleMockFormTitle {
  padding: 6px;
  left: 0;
  right:0;
  font-family: iOSFont;
  text-align: center;
  position: absolute;
}

.ode-SimpleMockFormIconIOSWhite,
.ode-SimpleMockFormIconIOSBlack {
  right: 0;
  padding: 12px;
  border: 0;
  background-color: transparent;
  position: absolute;
  display: none;
}

.ode-SimpleMockFormTitleBar-NavBar .ode-SimpleMockFormIconIOSWhite,
.ode-SimpleMockFormTitleBar-NavBar .ode-SimpleMockFormIconIOSBlack {
  display: inline-block;
}

/* iOS bottom navigation bar */
.ode-SimpleMockFormNavigationBarIOS {
  min-height: 4px;
  min-width: 110px;
  border-radius: 3px;
  position: absolute;
  background-color: #000000;
  display: block;
  left: 50%;
  bottom: 1%;
  transform: translate(-50%);
}

/* iOS Button */
.ode-SimpleMockForm-iOS .ode-SimpleMockButton {
  padding: 4px 8px;
  background-color: white;
  color : #007AFF;
  font-family: iOSFont;
}

/* Hover for iOS Button */
.ode-SimpleMockForm-iOS .ode-SimpleMockButton:hover {
  color: #007AFF;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  background-color: #F8F8FF;
  *background-color: #fcfcfc;
  text-decoration: none;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
}

/* iOS Spinner*/
.ode-SimpleMockForm-iOS .spinnerComponentStyle {
  color: #007AFF;;
}